eli
Uploaded by
9 SLIDES
274 VIEWS
100LIKES

Using JavaScript to Hide and Show Content in Web Design

DESCRIPTION

This lesson focuses on using JavaScript and CSS to manage content visibility in web design. Students will learn how to hide and display elements based on user interactions, such as form selections. By utilizing the CSS `display` property, content can be shown or hidden effectively. The lesson covers practical coding examples, demonstrating how to alter HTML and CSS properties using JavaScript, including toggling the visibility of elements like a clock. Engage with hands-on exercises to reinforce these concepts.

1 / 9

Download Presentation

Using JavaScript to Hide and Show Content in Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using Javascript to Hide and Show Content Web Design Sec 6-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

  2. Objectives • The student will: • Be able to use CSS to hide and display content. • Be able to use JavaScript to change and HTML element's CSS properties.

  3. Overview • It's common practice on today's web to hide content from users until it's needed. • JavaScript is commonly used is to hide or display content based on user behavior. • For example, a user may select an option when filling out an on-line form, and their selection might cause other related form fields to appear.

  4. Using CSS Code to Show/Hide Content • The display property is used to show or hide content. • Adding display: none; to the CSS code is one of several ways to hide content using CSS.  • Changing the code to display: block; will make that element visible again.

  5. Using Javascript to Change the display element • You have learned that you can use Javascript to create HTML code. • Javascript can also be used to change CSS code or even check the setting of CSS code.

  6. Setting the Display Status in CSS Code • To change the setting for the display element for my clock, first I need to read the current settings. varmyClock= document.getElementById('clock'); • Now I can alter the display setting by: //Turn it off myClock.style.display= 'none'; //Turn it on myClock.style.display = 'block';

  7. Rest of Today • Download the homework for today. • Add the button to toggle your clock on and off. • Note: you also change the content of the button used to toggle the clock!

  8. javascript.html:

  9. javascript.html:

More Related