Show and Hide Text or Images with CSS and JavaScript

Use DHTML to show or hide content using divs.

coding
Chris Schmidt/E+/Getty Images

DHTML allows you to create an application-style experience on your websites, reducing the frequency that entire pages have to be fully loaded. In applications, when you click on something, the application immediately changes to show that specific content or to provide you with your answer.

In contrast, Web pages typically have to be reloaded, or an entire new page has to be loaded. This can make the user experience more disjointed.

Your customers have to wait for the first page to load and then wait again for the second page to load, and so on.

Using DHTML, one of the easiest ways to improve this experience is to have divs toggle on and off to display content when they are requested.

What You'll Need

In order to create a div that can be toggled on and off, you need the following:

  • A link to control the div, turning it on and off when clicked
  • The div to show and hide
  • CSS to style the div hidden or visible
  • JavaScript to perform the action

The Controlling Link

This is the easiest part. Simply create a link like you would to another page. For now, leave the href attribute blank.

<a href="">Learn HTML</a>

You can place this anywhere on your web page.

The Div to Show and Hide

Create the div element you want to show and hide. Make sure that your div has a unique id on it. In the example below I use learn HTML.

<div id="col2">
  <p>This is the content column. It starts out blank except for this explanation text. Choose what you want to learn in the navigation column on the left. The text will appear below:</p>
  <div id="learnHTML">
    <h3>Learn HTML</h3>
    <ul>
      <li><a href="http://webdesign.about.com/c/ec/9.htm">Free HTML Class</a></li>
      <li><a href="http://webdesign.about.com/od/beginningtutorials/a/bl_htmltutorial.htm">HTML Tutorial</a></li>
      <li><a href="http://webdesign.about.com/cs/xhtmlxml/a/aa013100a.htm">What is XHTML?</a></li>
    </ul>
  </div>
</div>

The CSS to Show and Hide the Div

Create two classes for your CSS: one to hide the div and the other to show it. You have two options for this: display and visibility.

As mentioned in another article, display removes the div from the page flow, and visibility just changes how it's seen. I like to use display, but sometimes visibility makes sense, too.

I created two classes, and placed them in my style sheet:

.hidden { display: none; }
.unhidden { display: block; }

If you want to use visibility, then change these classes to:

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

Then add the hidden class to your div so that it starts as hidden on the page:

<div id="learnHTML" class="hidden">

JavaScript to Make It Work

All this script does is look at the current class set on your div and toggles it to unhidden if it's marked as hidden or vice versa.

This is only a few lines of JavaScript. Place the following in the head of your HTML document (before the </head> tag):

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

What this script does, line by line:

  1. Calls the function “unhide.” divID is the exact unique id you want to show or hide.
  2. Sets up a variable “item” with the value of your div.
  3. Performs a simple browser check; if the browser doesn't support getElementById, this script won't work.
  4. Checks the class on the div. If it's “hidden,” it changes it to “unhidden,” otherwise it changes it to “hidden.”
  1. Closes the if statement.
  2. Closes the function.

To make the script work, you need to do one more thing: Go back to your link and add the javascript to the href attribute. Be sure to use the exact unique id that you named your div in this href:

<a href="javascript:unhide('learnHTML');">Learn HTML</a>

Congratulations! You now have a div that will show and hide whenever you click on a link. See my example.

If you notice, my example uses three different divs that show and hide separately. The code is exactly the same. The only difference is the id on the two new divs that is also used in the href on my links.

Things to Watch Out For

This script is not fool-proof. There are some situations in which it could cause problems for you:

  • JavaScript Not Turned On
    If your readers don't have JavaScript or it's turned off, this script won't work. The hidden divs will remain hidden no matter what your readers do. One way to fix this is to put the hidden divs in a noscript area, but you'll have to play around with that to get them to display correctly.
  • Too Much Content
    This can be a great tool to allow your readers to see only the content they need, but if you put too much inside the hidden divs, it can drastically impact how the page loads. Remember that even though the content isn't displaying, the web browser is still downloading it, so use good sense in how much content you hide.
  • Customers Don't Understand
    Finally, customers may not be accustomed to clicking a link that shows or hides content. Play around with icons (plus signs and arrows work well) or text to explain what will happen to your customers. Another solution is to leave one of the divs open while the others are closed. This can convey the idea to your customers, so they can more quickly figure out how to open the remaining content.

You should always test DHTML like this with your customers. Once you feel confident that they can understand and use it, this can be a great way to get a large amount of content on your web pages without taking up a lot of visible space.