Collapsable content using jQuery

I'm designing a new site and wanted to try out having some of the content collapsible to make better use of the screen real estate. I'm using jQuery on the site and fortunately it was pretty easy to do this using some simple jQuery code.

On the jQuery site the Animated Collapse plugin seemed to do what I want. But I ended up not using it, partly because their documentation was incomprehensible enough to make me want to look elsewhere. It has a good demo though.

Fortunately the technique I settled on was pretty simple. The content in question are articles, each one contains a title, a byline, and a body. I wanted the body to be hidden or shown on clicking on a button.

The outline of the HTML I chose is this:-

 ... title text 

 ... content 

The important thing here is the relationship between an object with class='toggle-button' and one with class='toggleable'. These two objects can be anything, I chose an img and div because of my page layout but I suppose you could choose any pairs of object types.

jQuery includes functions to show and hide DOM objects on response to user actions in the browser. In particular the slideToggle method takes care of ensuring to show or hide a DOM object based on whether it is currently visible or not.

The image chosen needs to convey to the user they can and should click on the image. For this to work the user must realize they can click on that image to see more. It's up to you to design two images for this purpose, closed.gif to indicate the toggleable content is hidden and open.gif to indicate it's shown.

Note that I have it start with closed.gif. This means the toggleable content must begin hidden and that control over visibility of toggleable content is controlled by a jQuery script. To make sure toggleable content begins hidden include this in your CSS:

.toggleable {
    ...
    display: none;
    ...
}

The next part of this is hooking up jQuery code. I chose to use the toggle method. This method takes two functions, each are called alternatively as the user clicks on the object to which the toggle method is attached. Therefore in one of the functions cause the toggleable content to be made visible, and in the other function cause it to be hidden, like so:-

$(document).ready(function () {
        $('.toggle-button').toggle(
            function() { // handlerEven
                $(this).parent().siblings('.toggleable').slideToggle('slow');
            },
            function() { // handlerOdd
                $(this).parent().siblings('.toggleable').slideToggle('slow');
            }
        );
});

Let's walk through this step by step.

$(document).ready() is a core idiom of jQuery. It takes a function which will be called when the page is loaded in the browser and ready to go. Everything between the function() { ... } is our code to make the content collapsible.

$('.toggle-button').toggle() attaches a pair of toggle functions to every object on the page with a class of toggle-button. If you refer back up the page the toggle-button items is the closed.gif image. This is what converts the closed.gif image into a clickable button.

In the handler functions the $(this) object is a reference to the image. We want the toggleable content to show or hide and $(this).parent().siblings('.toggleable') is the way with jQuery to navigate the DOM to find the toggleable content. If you refer back to the HTML I wrote, $(this).parent() refers to the