Expanding Box Function


This useful function enables any type of content to be hidden until the visitor clicks on the heading for the expanding box. The heading can be text, but more often I use an image like so:

You have obviously clicked on the image above, and if you click on it again this content will disappear.

In fact you can add whatever content you like here, including text, images and forms etc.

This function can be used as many times as you wish on a page by defining different <div> classes for each item.

In fact you can add an expanding box within an expanding box like so. In which case when you click on the image at the very top both boxes disappear; alternatively clicking on the image immediately above closes this box only.