TUTORIAL: Expand/collapse blocks and navigation trees

Introduction

You've seen expand/collapse blocks just about everywhere on the Internet! Ever wanted to know how to make your own? You'll be surprised at how simple it is - just a few lines of JavaScript will let you toggle any block of content on your webpage.

The rest of this tutorial assumes a basic knowledge of HTML and JavaScript.

A simple toggle block

Let us start with a simple block of text (it could as well contain images and any other content) that we wish to make toggle-able:

Next, we add a link that toggles the block when clicked:

All that is left is the actual toggle function. The toggle function itself is quite simple: it takes the ID of the element to toggle and uses the CSS display property to show/hide it. By default, the display property is blank. (unless specified otherwise in the CSS) To hide an element, you just set display to 'none'. The code goes like this:

Put the above 3 code fragments together and you've got a working expand/collapse block.

In the above example, the block is initially visible. To have the block hidden by default, simply modify the first line as follows:

A small addition

With the addition of a couple more lines, you can also toggle the link text between 'Expand' and 'Collapse' when the user clicks on it. To do this, we pass in another parameter to toggle: a reference to the link that activates the toggle effect.

Building tree structures

By nesting one block within another, you can create tree-like structures where each individual node can be expanded and collapsed. The code for this uses the same toggle function defined above, except that multiple blocks are nested within each other:

Conclusion

Well, that's about it! It's that simple to create an expand/collapse block. And you can use as many of these blocks as you want on a single page.

You can download the sample code for this tutorial below. The attachment contains a single HTML file that shows the expand/collapse block and navigation tree in action.

Awesome tutorial I think I will use it

very cool, was hoping to find a tutorial on expanding/collapsing divs through javascript. Who knew all I had to do was look at my local ozzu forum.

Hi,

Thanks for the great tutorial.
But I still have one question. I use this code in a larger html-page. When I click on expand or collapse the page jumps automatically to the top of the page. Is there a way to change this?

Thanks.

PERFECT! Just what I needed, you are wonderful, thanks!
Sam

This was fantastic and simple to follow. Thanks!

Hi I realise this is an old thread but I am just starting a wiki for my IT dept. and have just found this. I really like this code and it was just what I was looking for but like Nina07, I too need to use it on a large page and it jumps back up to the top when a text block is expanded. Anyone know how to stop this?

Thanks