An Accordion is stacked list of items (eg. labels or thumbnails). that allows you to expand or stretch to display the content at a time. The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward. A common example of a GUI accordion is the Show/Hide operation of a box region, but extended to have multiple sections in a list. I went through a google search and found some useful Accordion stuff as below, hope you guys also like it.
This demo supports three AutoSize modes so it can fit in a variety of layouts.
- None – The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
- Limit – The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
- Fill – The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn’t the right size.
The demo presents the effect of an accordion. It’s fun and easy to implement using AJAX.
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.
The space on a page is limited in many ways. Of course we can write lengthy pages and home the user will scroll down to the end of the page to find all the content. Another option is using some show/hide effects. One these space saving visual effects is the accordion menu that enables a user to open a new region while the others close automatically. Opening and closing the panels is implemented using smooth size transitions.
This example illustrates how to use the Rico.Accordion behavior to transform a set of divs into a first class accordion component. The Rico.Accordion behavior makes use of the Effect.AccordionSize which is an effect that simultaneously grows the height of one element while shrinking the height of another. The Rico.Accordion behavior adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering.
The AJAX Accordion module allows you to display content in a space efficient manner by displaying them within an Accordion style control with collapsible panes. Content can either be arbitrary HTML content or from other existing modules that have already been defined elsewhere in your portal.
This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. It is very useful displaying larger images. Good for portfolio-usage.
Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look. The following is Accordion Menu example with full source code to get you started.
This plugin is 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 little customization of the list code in order for the plugin to work.
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 initializes with the first submenu expanded.
We’ve all seen the "accordion" type effect used on many Web 2.0 sites; however, many accordion scripts are heavy, make poor use of the libraries they are based on, and don’t handle things like ensuring that the accordion maintains a consistent height. In this tutorial, we will use the Prototype and Scriptaculous libraries to create a lightweight, intelligent accordion.