See this example in new window.

Step one: add Accordion to your YUI instance

In order to load Accordion widget to your YUI instance, the easiest way is to let the Loader do it:






Step two: instantiate and render the Accordion

When YUI3 finishes loading all scripts, it will execute a function, passed as last argument of YUI "use" function. This is the right place you have to start creating instances, including those of the Accordion. You can instantiate Accordion as any other widget in YUI3:

        var accordion = new Y.Accordion({
            srcNode: "#acc1",
            useAnimation: true,
            collapseOthersOnExpand: true
        });
        
        accordion.render();
        

Step three: create one or more items

You have to instantiate the following class: Y.AccordionItem
The accordion item is a regular widget with a few confguation options in addition to those, provided by Widget.
In this example we will create three items.

        var item1, item2, item3;
            
        item1 = new Y.AccordionItem( {
            label: "Item1, added from script",
            expanded: true,
            id: "dynamicItem1",
            contentHeight: {
                method: "fixed",
                height: 80
            },
            closable: true
        } );

        item1.set( "bodyContent", "This is the body of the item, added dynamically to accordion.
Content height has been set as \"fixed, 80px\"." ); accordion.addItem( item1 ); item2 = new Y.AccordionItem( { label: "Item2, added from script", expanded: true, id: "dynamicItem2", contentHeight: { method: "stretch" } } ); item2.set( "bodyContent", "This is the body of the item, added dynamically to accordion, before item1.
Content height has been set as \"stretch\"." ); accordion.addItem( item2, item1 ); item3 = new Y.AccordionItem( { label: "Item3, added from script", expanded: true, alwaysVisible: true, id: "dynamicItem3", contentHeight: { method: "auto" } } ); item3.set( "bodyContent", "
This is the body of the item, added dynamically to accordion.
Content height has been set as \"auto\".
" ); accordion.addItem( item3 );

See this example in new window.