Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data. Accordion items can be added or removed dynamically, reordered via drag-and-drop, closed and set as always visible. Originally, I built the widget top of YUI 2, but I’ve since ported it to YUI 3.

Accordion is part of the new YUI 3 Gallery, offered under the YUI BSD License, and available on the Yahoo! CDN.

The module consists of two classes — Accordion itself and AccordionItem, both extending YUI 3’s Widget.

The developer can build an Accordion from markup or from scratch using JavaScript. Check out the examples on GitHub for more information.

If you are building from JavaScript, the first step is to instantiate and render Accordion:

The next step is to add one or more items: