YUI3 Gallery Modules: Node Accordion Plugin
gallery-node-accordion in yui3-gallery by caridy

The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsable elements, elements are easy to customize, and only require a small set of dependencies.

To use the Accordion Node Plugin, simply pass a reference to the plugin to a Node instance's plug method.

It also has several configuration properties that can be set via an object literal that is passed as a second argument to a Node instance's plug method.

Quick overview:

HTML Markup:

<div id="myaccordion" class="yui-accordion yui-accordion-hidden">
    <div class="yui-module yui-accordion-item yui-accordion-item-active">
        <div class="yui-hd yui-accordion-item-hd">
            <h3 class="yui-accordion-item-trigger">item 1</h3>
        </div>
        <div class="yui-bd yui-accordion-item-bd">
            <p>
                item 1 content here...
            </p>
        </div>
    </div>
    <div class="yui-module yui-accordion-item">
        <div class="yui-hd yui-accordion-item-hd">
            <h3 class="yui-accordion-item-trigger">item 2</h3>
        </div>
        <div class="yui-bd yui-accordion-item-bd">
            <p>
                item 2 content here...
            </p>
        </div>
    </div>
</div>

JS code:

YUI({
    modules: {
        'gallery-node-accordion': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.27-23/build/gallery-node-accordion/gallery-node-accordion-min.js',
            requires: ['node-base','node-style','plugin','node-event-delegate','classnamemanager'],
            optional: ['anim'],
            supersedes: []
      }
 
    }
}).use('gallery-node-accordion', function(Y) {
 
    Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion);
 
});

Don't forget to include the YUI3 seed in the page.

Useful links:

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running: 

$ git clone git://github.com/caridy/yui3-gallery