This simple example shows an easy way to create 'show/hide' areas,
like the functionality commonly used in "FAQ" display scripts.
Each div has a class of either 'onDiv' or 'offDiv' to determine whether they load open or shut.
The content being shown/hidden is in a div with class 'show-hide'.
Custom CSS rules create the show/hide links as buttons in the top corner of each div,
and ensure only the correct link is shown at any given time, by hiding the other one.
Clicking the show or hide button link causes the sibling show-hide div to be shown or hidden,
and a the class of onDiv or offDiv to be switched dynamically.
UPDATE:
//
Headers can be clicked
// Show all - Hide all buttons added , and toggle each-other on or off
// CSS hides buttons, js shows them - if no js, no X or + links are seen
// Show-hide effect using .slideUp and .slideDown for clean show/hide without text collapse
Disclaimer: there are a few really good accordion plugins for jQuery, and the jQuery UI has some built in. But this is a simple version... only a few lines in the page head, and no extra js files other than the main jQuery file are needed. Plus, I wanted to make my own... because jQuery makes it so fun!