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.
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.
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.
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.
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.
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.
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.
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.
[...] http://www.donotyet.com/2009/09/13/the-ultimate-collection-of-ajax-accordion/ [...]
[...] http://www.donotyet.com/2009/09/13/the-ultimate-collection-of-ajax-accordion/ [...]