Examples show you the correct HTML and CSS needed for expandable and collapsible areas.
The accordion widget allow us to create expandable or collapsable elements. We have two different approach, all the elements can be expanded at the same time, or only one of them can be opened. This example show the first approach.
The accordion can handle clicks on each item to expand or collapse the item, depending of the target, but also supports mousein/mouseout (rollover approach). In this case depending of the position of the mouse, the accordion's items will be toggle.
The content of each element will be loaded using YUI Dispacher plugins.
The accordion widget is a very extensible component, to expand and collapse DOM elements, you can use it to create hidden panels, horizontal or vertical panels.
The accordion is very flexible in terms of markup. Basically you can accomodate the accordion's classes to any HTML markup. In this example we use the YUI Panel Skin to create the accordion's items.
It's really easy to handle the states of the items using JS, you only need a reference to a DOM element within an accordion item, and you can modify the state for that particular item, collapsing or expanding it. Also you can control the accordion as a single object.
The accordion widget do not use listeners for the trigger elements, which means that you can extend your current HTML markup, and the new elements can be handle by the accordion control automatically. In the same way, you can remove elements from the DOM without worry about memory leaks.
The accordion works based on the HTML markup, catching the events and fires the corresponding behavior. This technique allows us to use complex markups easily. This example describes how to create nested accordions. Note: the child accordion is persistent, which means that only one element can be opened at the same time.
The elements will be expanded or collapsed when you click in the area that represent the element. You don't need to define a particular trigger element. As you can see in this example, the elements with the class "trigger" fires the toggle method.
The accordion widget use the HTML code (DOM structure) to create the accordion's effects, which means that you can use it with some of the YUI Widgets. This example shows how to use the YUI Panel / Dialog with the accordion control, and also creating dependencies between some of the panels.
The accordion also supports vertical items. This approach is not widely extended, but in case you need it, there it goes... :-)
The accordion supports integration with others widgets, plugins and utilities, and it's really easy. Here is an example of integration with the Sound Manager plugin.
In this example, we used the YUI Drag and Drop utility and the YUI Container Skin to create accordion items and these items can be drag and drop between different accordion instances.