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: overwrite the default Accordion's properties and instantiate it

When YUI3 finishes loading 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.
Among with standard Widget properties, you can set Accordion properties also: 

var accordion;

accordion = new Y.Accordion({
    srcNode: "#acc1",
    useAnimation: true,
    animation: {
        duration: 1.5,
        easing: Y.Easing.backIn
    },
    collapseOthersOnExpand: false,
    reorderItems: true,
    resizeEvent: "default"
});

accordion.render();

Here are the meaning of these properties:

  1. useAnimation - if true, the item's expanding or collapsing process will be animated. True by default.
  2. animation - contains animation settings - these are duration and easing. Here we overwrite Accordion's default settings with duration: 1.5 and as easing: Y.Easing.backIn
  3. collapseOthersOnExpand - if true, when Accordion expands some item, it will collapse all the others, which have alwaysVisible property set to false. True by default.
  4. reorderItems - if true, the user will be able to reorder the items by using drag and drop. In this case, you must include drag and drop modules to your YUI instance. You may include the whole 'dd' module, or just these, required by Accordion: 'dd-constrain', 'dd-proxy', 'dd-drop'.
  5. resizeEvent - its value must be one of these: string "default" or object with two properties - sourceObject and resizeEvent. This is useful, when you have an object, already listening to resize event from browser. Such object is LayoutManager in 2.8 - you can provide an instance of LayoutManager as sourceObject and "resize" for resizeEvent.

Step three: overwrite default item properties and instantiate it

Note: some of item's properties can be overwritten from markup also. 

var item1;

item1 = new Y.AccordionItem({
    label: "Item, added from script",
    expanded: true,
    id: "dynamicItem1",
    contentHeight: {
        method: "stretch"
    },
    alwaysVisible: true,
    closable: true
});

item1.set( "bodyContent", "This is the body of the item, added dynamically to accordion.
Content height has been set as \"stretch\"." );

accordion.addItem( item1 );

Here are the meaning of these properties:

  1. label - the label of the item.
  2. expanded - if true, the item will be expanded after render.
  3. contentHeight - set content height policy. In this case, stretch means, that the height of the content is unknown and should be calculated later, depending on the height of the other items in Accordion and its total height.
  4. alwaysVisible - if true, the item will be always visible after render. This means, if Accordion's property collapseOthersOnExpand is set true and some other item is being expanded, the items, which have alwaysVisible property set to true, will not collapse.
  5. closable - if true, the user will be able to close the item.

See this example in new window.