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.

beautiful accordion

Accordion Demonstration

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.

Accordion Demonstration

Demo  Demo

YourHead’s Accordion

Accordion plugin for RapidWeaver builds a dynamic interactive menu-driven interface from your text and graphics. Items open with a smooth slide and close when you choose other content. The content can be just about anything you like: text, graphics, and HTML. Web 2.0: That’s the latest buzzword for creating dynamic sites with interest that interact with the user and don’t require page reloads from the server. To get a Web 2.0 experience you’d usually have to be an expert in Javascript and AJAX or buy expensive tools. But with Accordion you just use the simple, intuitive interface of RapidWeaver to get your content to the web. Everyone else will think you’re a Web 2.0 guru.

yourhead

Demo  Demo Download Download

 Interface elements for jQuery

The demo presents the effect of an accordion. It’s fun and easy to implement using AJAX.

eyecon_accordion

Demo  Demo Download Download

jQuery plugin: Accordion

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.

bassistance_accordion 

Demo  Demo Download Download

Simple Sliding Sample

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.

mathertel accordion

Demo  Demo Download Download

Rico 2.0 Accordion Example

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.

openrico accordion

Demo  Demo Download Download

DotNetNuke Modules

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.

Built-In Styles Accordion

Demo  Demo Download Download

Deziner Folio

Javascript accordions have been used a lot in web design world. There are a lot of scripts we have seen and sure you too would have seen them.  We hope our script is one of the smallest accordion script which is extremely simple and easy to integrate. Doesn’t require any framework and fully cross-browser compatible.

Deziner Folio

Demo  Demo Download Download

Moofx

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. It’s very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won’t let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

Moofx accordion

Demo  Demo Download Download

Chris Esler

Hacked version of accordion.js javascript can specify which elements you want open as an option and can now specify action of toggling each accordion element, without closing the others. Just like the option states, it opens and closes.

Chris Esler accordion

Demo  Demo

Portalzine

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.

Portalzine accordion

Demo  Demo Download Download

Accordion Menu script

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.

Accordion Menu Script

Demo  Demo Download Download

HoverAccordion

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.HoverAccordion

Demo  Demo Download Download

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 initializes with the first submenu expanded.

Simple JQuery Accordion menu

Demo  Demo Download Download

Accordion Effect Using Prototype and Scriptaculous

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.

accordion

Demo  Demo Download Download

Related Posts