Lesson 5: Using Javascript to Hide and Show Content

Overview

One way that 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. In this lesson, you will use CSS and Javascript to show and hide the clock that you've created.

Learner Outcomes

At the completion of this exercise:

Activities

It's common practice on today's web to hide content from users until it's needed. In this lesson, you will hide your clock, then add a link that if clicked, will display the clock.

Open javascript.html in both your text editor and web browser. Go to the style sheet that you created for div#clock in the previous lesson. Add the following property to the style sheet:

display: none;

Now refresh your page in your browser. What happened? If everything worked properly, your clock should no longer be visible. This is one of several ways to hide content using CSS. To make the element visible again, you will change this property to:

display: block;

However, in this case we want to make the element visible only if the user specifically requests it. So we'll have to change the style dynamically, using JavaScript, triggered by an onclick event.

First, add the element that you want the user to click:

<button onclick="toggleClock()" id="clockButton">Show clock</button>

Note that this button is essentially the same as the one you created in Lesson 1 to show the alert. There's one important difference though. This button has an id attribute. That's so you can access it easily using JavaScript (you'll see why in a moment).

Now that you have a button that, when clicked, calls the toggleClock() function, you need to create a toggleClock() function. Here's that function - just add it to the existing script section in the head of your web page:

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

In this new toggleClock() function, your are using JavaScript to retrieve the clock element, get the current value of its display style, then checking it. If the display is currently set to "block", the clock is visible, so you change the display to "none", which hides the clock. If the clock is already hidden, you change the display to "block" to make it visible again. While you're switching the clock's display back and forth from "block" to "none", you're also changing the text (innerHTML) on the clock button, so that alternates between "Show clock" and "Hide clock", depending on the current display state of the clock.

All done?

Test your web page, and make sure you can show and hide the clock with the new button. Also make sure the button text changes from "Show clock" to "Hide clock" as appropriate. Share your web page with your instructor. If all is well, proceed to the next lesson.