I have ported over this from my old website, only as a reminder of what the internet looked like in 2008…

I have chosen to go with a very simple code snippit to begin what I hope will be a useful repository of original code snippits. Unless I note otherwise, you are welcome to use any code in my “Code Snippits” post category. I would greatly appreciate it if you let me know you where using the code. Without further delay, this code allows you to easily put areas (of the div type) on your site that can be collapsed and expanded by clicking on a heading. This manipulation is done using JavaScript. In my code below, I have used functions from the MooTools toolkit (a great toolkit to use if you do much JavaScript). So, the installation is pretty straight forward:

Steps

1. Download the two icon images and save them in the relative path images/icon_add.png and images/icon_remove.png. You can also use your own icons (they should be 16x16 pixels).

2. Download the MooTools script, and upload it to your server. Then, include it in the HTML document you are working with using:

(Visual content broken)

You can also get only the parts of MooTools you need (for this script Element and Element.Styles) and compress the package into a small file (helps for faster page loading), by using the utility here.

3. Put the following JavaScript into your HTML page. This can go in the head, but does not have to. However, it should be above the first collapsing box in your code.

(Visual content broken)

4. Then, each time you wish to put a collapsing box in, use the following code. I have marked the values you need to change. You must change ‘ID_NAME’ in three places. Within the code for each box, these 3 places should have the exact same value inserted where I have written ‘ID_NAME’. However, if you use more than one box on a page, you cannot use the same value for ID_NAME the next time.

TITLE OF DROPDOWN BOX

5. The finished result:

Looking back, we’re all glad that more modern CSS and JS styling came along…