Java Script: Hide and Show Tricks

It is a very simple trick, but adds a nice bit of interactive behaviour to your site.

Let’s suppose you have some content in your page that is somehow “optional”, i.e., a visitor of your site may find it interesting, but most probably don’t. For example, imagine having a long list of cars grouped by manufacturer: probably the visitors will be interested in a couple of manufacturers, but the list of other models will occupy a lot of screen space.

It would be much better if you could show only the manufacturers’ list, then the users interested in a certain one would click on its name and reveal the list of models for that factory. Well, this is very easy to do, and I’m gonna show you now.

First of all, the markup. In a nutshell, we’ll have something like this:

1
2
3
4
5
6

<div id="anchor" onclick="ToggleDiv('content');"> 
    Click me to show the content! 
</div> 
<div id="content" style="display: none;"> 
    I am the content. 
</div>

Notice that all of this code is already there in the served page. It is not added at “run time”, or “asynchronously” to be more correct; instead, the second div is hidden with the inline CSS we specified, and a Javascript function, called by the onclick event, will change this property to make it visible.

Since we’re at this, let’s make our anchor work like a toggle button. It’s easy to do: if the display is set to none, then change it to block; if it’s block, then set it to none. To do this, we only need to know two things:

• document.getElementById(‘myId’) returns the element whose id is ‘myId’, no matter where it is placed in the document;
• on an HTMLElement object (i.e., any object in the document that is recognized as an HTML markup element) we can use the style property to access its CSS style, and then display on top of that to set/get the CSS display property.

Without further ado, here is the needed Javascript.

1
2
3
4
5
6
7
8

function ToggleDiv(elementId) 
{ 
    var el = document.getElementById(elementId); 
    if (el.style.display == 'none') 
    { el.style.display = 'block'; } 
    else 
    { el.style.display = 'none'; } 
}

Place this code inside a <script type="text/javascript"> tag in the head of your page. Now test it, and see it work.

A few notes on this. First of all, the behaviour is slightly different if you don’t explicitly set the display property before calling the JS function. In particular, using the exact function I typed above will apparently do nothing on the first click: in fact, the property is not equal to ‘none’, and this will trigger the else branch, which makes the content invisible. If you click again, then you’ll go into the if branch, getting the correct behaviour. Of course, it’s easy to modify the condition in the function above to take care of the case where display is an empty string.

Often, you’ll see the anchor being implemented as a real anchor, i.e., an a tag. This is absolutely fine; I used a div for generality, but you can use any HTML element that has an event associated (you don’t even have to use the onclick event!). But what should go in the href attribute of a link tag? You have two choices:

• Make it go nowhere. The best way to do this is to use href=”javascript:void(0)”. This is the closest you can get to “noop” when it comes to web programming;
• Make it go to the content, with a named anchor. To do this, use href=”#content”. This will not request the page again, but will scroll to the content div.

The second way has a potential advantage on the front of usability. Suppose your visitor doesn’t have Javascript enabled; then, using the code above, he would never be able to show the hidden content. To fix this, you have to make two changes:

• remove the inline CSS style from the content div. This will make it visible by default when the page is loaded;
• write a Javascript function that sets the style.display property to ‘none’ where needed, and call this function in the onload event of the body tag.

With these modifications, users with Javascript turned on will load the page with the hidden content visible, then, when the body has finished loading, this content will be hidden; when the anchor element is triggered, the content shows and the browser moves to its position. On the other hand, non-Javascript clients will load the page with the content visible, then the onload event won’t run and it will stay visible; when the anchor element is triggered, the browser will simply move to the content’s position, thus showing the user that something has actually happened.

You can see a demo of the effect with some real-life code and markup here, together with a more advanced example.

Source: Click here