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
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
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:
margin: 0px 20px 0px 20px;
Add a comment
<input type="reset" name="reset" value="Cancel"
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.