Show/Hide Block of Text with CSS and JavaScript


One of the ways that Web pages often differ from applications on the desktop is how content appears. In applications, you click on something, and the application immediately makes a change to show the content or provide you with your answer. But with Web pages, typically you have to reload the page or go to a completely new page. This can make the experience more disjointed – as your customers have to wait for the first page to load and then wait again for the second page and so on. But with DHTML you can create an application-style experience – and one of the easiest ways is to have DIVs that toggle on and off when they are requested.

What You’ll Need

In order to create a DIV that turns on and off, you need the following:

  • A link to control the DIV (turn it on and off)
  • 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

Then create the DIV you want to show and hide. For this example, the DIV will appear where ever you place it on the page design. So be sure to position the DIV where you want it to show up. I added some explanatory text above it in a container DIV. Make sure that your DIV has a unique ID on it, mine is “learnHTML”.

<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="">Free HTML Class</a></li> <li><a href="">HTML Tutorial</a></li> <li><a href="">What is XHTML?</a></li> </ul> </div> </div>

The CSS to Show and Hide the DIV

Then you need to 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 we’ve mentioned in another article, display removes the DIV from the 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 out as hidden on the page:

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

The JavaScript Makes it Work

All this script does is look at the current class set on your DIV and if it’s marked as hidden, it it changes it to unhidden, if it’s marked as unhidden, it changes it to hidden. This is what toggles the DIV on and off. And it’s only a few lines of JavaScript. Place the following in the HEAD of your HTML document (before the </head>):

<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. Does 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”.
  5. Closes the if statement.
  6. 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>

You now have a DIV that will show and hide whenever you click on a link. If you notice, the example uses 3 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.

Some Things to Watch Out For

This script is not fool-proof. There are some situations where 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 stuff 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 put in there.
  • Customers Don’t Understand
    Finally, it can be difficult for customers to understand that clicking a link will show or hide content, as that’s not how the Web typically works. Play around with icons (plus-signs and arrows often work well) and text to explain what will happen to your customers.

Comments are closed.