Vertical Accordion effect with jQuery
Basic HTML for the accordion is as follows:
<ul class="accordion"> <li> <h3>Handle 1</h3> <div class="panel"> … </div> </li> <li> <h3>Handle 2</h3> <ul class="panel"> … </ul> </li> <li> <h3>Handle 3</h3> <p class="panel"> … </p> </li> </ul>
For each panel in the accordion, you will require both a panel (the content of our accordion pane) AND a handle (an item that is clicked to open a panel). These can be anything you want as you can specify the jQuery selector used for each as part of your configuration. By default, the selector for handles is “h3″, and the selector for panels is “.panel”. Obviously that was fairly specific to my original implementation, so I’ll look to fix that in the near future.
Notice that, because we’re specifying our own selectors, we’re able to use flexible HTML for either the panel or the handle. However, it’s also worth remembering that the accordion script injects a link around the contents of whatever you specify as the handle, so that the handle becomes focusable and keyboard navigable. If you are likely to end up with invalid markup (i.e. the inline link wrapped around a block level element), you may get unpredictable behaviour cross-browser.
The included CSS is really only a reset style-sheet for the list elements within the accordion. You will probably already be achieving this with your own reset stylesheet, but you can add the following link to the head of your document:
<link rel="stylesheet" href="css/accordion.core.css" type="text/css" charset="utf-8">
To activate the accordion in your pages, you will require both jQuery and the accordion script itself to be included at the bottom of your page, just before the closing tag, but before any script that applies the accordion to a jQuery object.
A default implementation would look like this:
As with my carousel, you can configure the accordion more specifically by passing a configuration object to the
Note: The above options are all the defaults.
The article source:http://nefariousdesigns.co.uk/archive/2010/08/jquery-accordion/
You might also like
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu