White Wave Designs

How to Show and Hide Content with Div Tags, CSS and Javascript

Click Here to Show/Hide Example

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cool, huh!! Here's how to do this. Place the content you want to be shown/hidden inside a "div" (division) html tag. Assign the tag a unique "id."

<div id="uniqueID">
     <p>This is the text I want to show and hide. </p>
</div>

Create a style for this div area with a display of none and place this in your stylesheet. Note: older browsers will 'ignore' a div tag, so the javascript replaces it with a switch to the 'layer' instead. Therefore, don't use the div tag for any further styling, or it will be ignored (ie, centering or styles). Replace my example of "uniqueID" with your own div identifier.

<style type="text/css">
<!--
div#uniqueID
{ display: none; }
-->
</style>

Set the link to "javascript", which will show or hide the div, depending on what state it's in when the link is clicked. Replace my example of the parameter 'uniqueID' with the name of your own div identifier. The title acts like an image alt tag, so it's not necessary to put the entire text of the link in it. And, of course, the link text is what the reader of your page will see first.

<a href="javascript:toggleLayer('uniqueID');" title="Show/Hide uniqueID">Show or Hide uniqueID</a>

Add this javascript to your external javascript file, or put the <script></script> tags around it in the file with the show/hide content in it. This function should be used as is; you will not have to modify it.

function toggleLayer(whichLayer)
{
     if (document.getElementById)
     {
          // this is the way the standards work
          var style2 = document.getElementById(whichLayer).style;
          style2.display = style2.display? "":"block";
     }
     else if (document.all)
     {
          // this is the way old msie versions work
          var style2 = document.all[whichLayer].style;
          style2.display = style2.display? "":"block";
     }
     else if (document.layers)
     {
          // this is the way nn4 works
          var style2 = document.layers[whichLayer].style;
          style2.display = style2.display? "":"block";
     }
}

Click Here to Show/Hide Another Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

That should do it! As you can see, you can have multiple show and hide areas of content on the same page. If your show/hide content is not working properly, make sure that the following are named exactly the same:

  • The identifier in the div tag.
  • The div style in your css file.
  • The parameter (enclosed with single quotes) in your a href link tag that calls the toggleLayer function.

HINT! To show the content first, and then have it hide when the link is clicked on, simply switch the "none" and the "block" in the style and javascript. This is great when your target audience is likely to have javascript turned off! (Thanks to Dan for brining this up!)

This has been tested on Opera, Netscape (newer and older versions), IE 6, Firefox and Mozilla. If you are able to test this on a Mac or a different browser, email me the results. Also, if you have any questions, please email me.