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 16×16 pixels).
2) Download the MooTools script, and upload it to your server. Then, include it in the HTML document you are working with using:
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.
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.
Content of the div goes here.