[Tutorial] Collapsible page objects (divs, tables, anything...)

**KoOL** · 06-12-2008, 02:31 PM

Ever since the internet was first started web designers have been trying out all sorts of different navigation and page structure techniques to try to make their web pages more usable to the end user. The most common technique is to split content up into multiple pages but sometimes that isn't enough. What if you wanted to split up your content but restrict it to a single page. By using the collapse/expand technique here you can allow your users to show or hide what they do or don't want to see.
Table of contents

The basic idea
The JavaScript
The XHTML markup

1. The basic idea

Lets say on a page you have the names of 3 of your friends and you want to include a little paragraph about each of them. However, you want to do it in such a way that upon loading the page the persons information is not visible and can only be seen when their name is clicked. With the use of JavaScript and a tiny amount of effort we can do exactly that.

Although this particular example isn't perfect the idea behind it all is pretty much the same. We want to be able to show or hide items on our page on the click of a button. This will work by using a JavaScript function to which we will call from a link. All the function will do is toggle a particular elemnts visibility by using the CSS 'display' property.
2. The JavaScript

As I said, we will be using a JavaScript function which will toggle the objects visibility. This function will take in a single parameter which is the ID of the element we wish to hide/show. Take a look at the following JavaScript snippet.
function getObject(id)
{
var obj = null;

if(document.getElementById)
obj = document.getElementById(id);
else if(document.all)
obj = document.all[id];
else if(document.layers)
obj = document.layers[id];

return obj;
}

function toggleObject(id)
{
var obj = getObject(id);

if(!obj)
return false;

if(obj.style.display == 'none')
{
obj.style.display = '';
}

else
{
obj.style.display = 'none';
}

return true;
}

As you can see from the above piece of JavaScript there are two functions: getObject() and toggleObject(). The actual toggling is all down to the second function although the first, getObject(), is still very important. In order for the toggleObject() function to make any changes to the style property of the pages elements it must first locate the element via its ID and access it as an object.

The getObject() functions purpose is to return the requested page element as an object and tries a few different methods in order to do this. The reason for the elseif statement is to ensure that it works in as many different browsers/situations as possible.

The toggleObject() function is where all the work is done. Firstly it creates a new variable call obj and sets it to the result of the getObject() function call. This is followed by a short, two line if statement just to see if obj is valid and if not to exit the function by returning as false.

The second if else statement is checking to see what the current CSS display property of the selected element is set to. If it is set to 'none' then it means that the element would not be visible on the page. In this is the case we would want to reverse this by setting the display property to an empty string. The empty string would tell the browser to reset it back to its default display state (e.g. block, inline, etc.). If however the display property was not equal to 'none' then the else block of the statement would be executed and the elements display property would be set to 'none' to hide it.
3. The XHTML markup

First of all we need to include the JavaScript code shown above into our web page so we can use its functionality. To do this simply place the following piece of code somewhere between the <head> and </head> tags tags of your web page. Remember that you will also need to save the JavaScript code into a seperate .js file (I called mine collapse.js) which needs to be in the same directory as your page.
<script type="text/javascript" src="collapse.js"></script>

Because we want to toggle the elements visibility when the user clicks on something we need to call the JavaScript function using the onClick property of a link. Take a look at the following piece of code.
<a href="#" onclick="return !toggleObject('elementID');">Toggle visibility</a>

Above is just a simple text link with the addition of the onClick property. This is set to call the toggleObject() function with the parameter 'elementID'. This means that any element on the page with the ID of 'elementID' will have its visibility toggled (hidden or shown).

The great thing about doing it this way is that you can have an unlimited number of elements all of which can be toggled seperately.