Expanding and Collapsing Divs

INTRO

Daniel Stocks has a really great example of a number of collapsing jQuery menus on his website and also on GitHub.

I took his examples and eliminated all of the ones that weren't what I wanted for my website. The one I chose was the "Custom Show and Hide" example. I pulled out of the HTML all of the other examples and restyled it to my liking. You can see a demo of it here. 

SET UP

To enable the JavaScript needed to animate the collapsing divs you will need to link to the following JavaScript files: 

The code goes in the head of the page and looks like this:

MARK UP

To enable the collapsing function on a div the following id needs to be given to it:

The div with the "custom-show-hide-example" id needs to contain all of the collapsable divs.

The code for the collapsing divs is fairly straight-forward. There are h3 tags on the text that appears over the collapsed div and the content is contained within a standard div.

The collapsing divs can contain whatever content a normal div can, links, images, lists, etc.

SOURCE FILES

You can download all of the files needed for this page here. The files included are an HTML and CSS file, an image folder and a source folder that includes the JavaScript files needed to add the collapse functionality to the divs.