Simple show/hide divs with jQuery

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

See the demo

See the code

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!

Demonstration

Show All Hide All


 +   X 
How can I make a div load already opened?
Like this one?
Just give the containing div a class of 'onDiv'
 +   X 
What kind of effects are used?
In this case, we are using .show('slow') for a nice fade in, but jQuery supports a number of effects, and plugins offer even more.
 +   X 
Can I put other content into the show hide areas?
Sure! Remember this guy?
Whatever you want, you got!
 +   X 
Can I format the questions?
Nope.


Just kidding... of course you can. Check the page source... its just html.
 +   X 
Does it matter how long my content is?

Nope.

  • Working through a top-down, bottom-up approach
  • The vitality of conceptual synergies is of supreme importance
  • Building a dynamic relationship between the main players
  • Quantitative analysis of all the key ratios has a vital role to play in this
  • In a collaborative, forward-thinking venture brought together through the merging of like minds
  • Highly motivated participants contributing to a valued-added outcome
  • Benchmarking against industry leaders, an essential process, should be a top priority at all times
  • To ensure that non-operating cash outflows are assessed
  • Through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard
  • Taking full cognizance of organizational learning parameters and principles
  • Combined with optimal use of human resources
  • That will indubitably lay the firm foundations for any leading company
  • To experience a profound paradigm shift
  • Presentation of the process flow should culminate in idea generation
  • Motivating participants and capturing their expectations
  • In order to build a shared view of what can be improved
  • The strategic vision - if indeed there be one - is required to identify
  • The components and priorities for the change program
  • Whether the organization's core competences are fully in line, given market realities
  • To focus on improvement, not cost


Jquery Code
CSS Styles