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>

Read more »