9 Useful JQuery Accordion Examples



Simple JQuery Accordion menu

This is a simple Accordion menu done in JQuery. Links with subitems under them will expand the submenu when clicked. Items that don't have subitems are normal links. The menu initialises with the first submenu expanded.


Demo Details


jQuery Accordion: Slide out and drawer effect

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.

The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.


Demo Details


Simple Accordion

Here is a sample of accordion.

The first line will add a CSS class "active" to the first <H3> element within the <div class="accordion"> (the "active" class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div class="accordion">.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the class="active".

Demo Details


Kwicks for jQuery

 

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

Demo Details

Horizontal JavaScript Accordion 1kb

 

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. This is a similar looking feature on the mootools homepage and this is a replica of the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

Demo Details


Making accordion menu using jquery

Yet another jquery accordion menu. It shows the accordion that will open the items on click. It can be configured easily so that the items will be opened on mouse over, not requiring a mouse click.

 

Demo Details


jQuery plugin: Accordion

This plugin is now part of jQuery UI and this standalone version won’t be updated anymore. The page will remain as a reference.

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

 

Demo Details


HoverAccordion

This is yet another accordion script, except you don't have to click to open one item, you just move your mouse over it. The plugin is actually made to serve as a menu, but it could also work as a regular accordion for displaying different types of content within a page. It was important to require as little customization of the list code in order for the plugin to work, i.e. it doesn't have to manually add classes etc. to header or active elements, as the structure of the list already contains all the information needed.

Demo Details


jQuery - Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.

 

 

Currrent functionality:

  • No dependencies
  • Optional use of easing plugin
  • Close and open content one after the other
  • Close and open at the same time
  • Choose trigger (mouseover, click ...)
  • Easily control through external calls
  • Open content on load
  • Open content through hash tags in the url (#tab1, #tab2...)
  • Position of handle (left, right)
  • Mixed handle positions - 2 left , 2 right ...
  • Cycle through content by interval
  • Events when animations starts and ends
  • Hide content until all has been assembled

 

Demo Details