Step one: add Accordion to your YUI instance

In order to use Accordion widget, you have to add it as external module in your YUI instance or include the JavaScript and CSS manually on the page.

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( {
            contentBox: "#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 from widget.
In this example we will create three items.

        var item1, item2, item3;
            
        item1 = new Y.AccordionItem( {
            label: "Item1, added from script",
            expanded: true,
            contentBox: "dynamicContentBox1",
            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,
            contentBox: "dynamicContentBox2",
            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,
            contentBox: "dynamicContentBox3",
            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 );