The Netlobo logo - a Nevada desert landscape

Showing and Hiding a DIV using CSS and Javascript

An example with code of showing and hiding a DIV using CSS and Javascript

Published Mar 12, 2005 by lobo235
Last updated on May 19, 2009

A while back I came across some websites that had sections of the webpage in a div that could be hidden and shown by the click of a link. I set out out on my own to learn how this worked and this is what I discovered.

There are many situations encountered when designing a webpage where showing and hiding a div using a link is useful. For example, if you were making a blog you might want to have a form at the bottom of each entry that allows users to add a comment to your blog entry. It is not necessary to show this form all the time because not all users will want to comment on your entry. You could have a link that says "Add a comment" and when that is clicked it will display a div containing that form. Below is an example of this.

My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...

Add a comment

Name:

Comment:

It is nice to do it this way because you don't have to send the user to a popup window or separate page so they can add a comment. Also, subsequent clicks on the "Add a comment" link will cause it to "toggle" on and off. The user can also click on the "Cancel" button to collapse or hide the div again because I added an onclick to the reset input button that toggles the div's visibility again. Clicking the "Cancel" button also clears the form. In order to implement the example above all you need is a javascript function (found below), a div with accompanying CSS, and a link that will tie it all together. First, here is the function:

function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

As you can see, this function should work with most browsers including old versions of Internet Explorer and Netscape Navigator. The next thing we need to do is create our div that we will be hiding and showing and add some CSS for it. Below is the CSS and the div tag used in the example above:

div#commentForm
{
margin: 0px 20px 0px 20px;
display: none;
}
<div id="commentForm">
</div>

Note that you need to give the div an ID because that is how the javascript function knows which div to toggle on and off. Also, by changing "display: none;" to "display: block;" in your CSS you can have the div be visible at first and then hidden the first time the toggle link is clicked. For most implementations of this you will want your div to be hidden at first. Now we move on to the link that will toggle the visibility of the div. The link used in the above example and the Cancel button are done as follows:

<a href="javascript:toggleLayer('commentForm');" title="Add a comment to this entry">
Add a comment
</a>
<input type="reset" name="reset" value="Cancel"
onclick="javascript:toggleLayer('commentForm');" />

It is worth noting that even though the divs are hidden when the page loads, the html code for them still gets downloaded. So, for example, if you view the source of the web page, the html code for the div is present in the source even though it does not actually get displayed on the screen. The more hidden divs you have the longer your page will take to load. In your browser you can see how big your html code is by right-clicking on the page and going to "properties" or "page info" (this varies depending on the browser you use). It should list the size of the page in bytes. You should try to keep your pages as small as possible to avoid long load times for users with slow internet connections.

If you would like to learn about an alternate method for showing and hiding DIVs that is more accessible for users who must use a screen-reader to surf the web, check out our article: Showing/Hiding a DIV using the Off-Left Method.

82 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Clean URLs using Apache's mod_rewrite
Fade the Background Color of an Element using Javascript
Delete Confirmation using Javascript