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: define the markup of the accordion and (optionally) its items

In this example, we will create markup for accordion itself and three items.

1. Create Accordion container:

Since YUI 3.1, there is no need to define contentBox and boundingBox. You have to define only Widget's srcNode:

If your appication runs in quirks mode, you may have to set position, height and "overflow:hidden" for IE.

For each item, we have to create standard markup as required by WidgetStdMod, with some additional settings:

2. Set class "yui3-accordion-item" in the main item's div:

	

	........
	
        

3. Set item header markup

When building Accordion items from markup, it is preferable to add the required markup for the header. In this way, if JavaScript is disabled, the headers will look in the same way, as if it would be enabled.
To do that, place inside standard Widget's header definition the following HTML elements with their classes.

Note:

This is optional, you can omit all the HTML in header definition (even the whole header) and AccordionItem will create it. Also, you can set only some of these HTML elements. What is missing, will be created when AccordionItem renders.

In the example below we set the label of the item - "Label 1" also.

        

            
            Label 1
            

                
                
                
            
        
        

4. Set AccordionItem properties

There are three ways to set properties to AccordionItem from markup:

• use predefined fake class names
• store properties as JSON string in "yuiConfig" custom attribute
• use HTML5 "data" attribute. In this case you must prefix Accordion's config attributes with "data-".

If you are using yuiConfig attribute, you can set every property, which AccordionItem supports. If you are using fake class names, you can set the following properties:

• expanded
• alwaysVisible
• contentHeight
• closable

If you are using "data" attribute, you can set the following properties:

• label
• expanded
• alwaysVisible
• contentHeight
• closable

Note: expanded, alwaysVisible and closable are boolean properties. If you are setting the values to true by using data attribute, you may do this in three ways:

• "true"
• "yes"
• "1"

Examples:

4.1 Set "expanded" property

In order to set "expanded" property to true (it is false by default), you may set fake class "yui3-accordion-item-expanded" in the main item's div:

	

	........
	
        

or you may set "expanded" to true in yuiConfig attribute:

        

             ........
        
        

or set "expanded" to true via data attribute:

        
 
             ........
        
        

4.2 Set "alwaysVisible" property

Use "yui3-accordion-item-alwaysvisible" class name to make this item always visible:

	

	........
	
        

or set {"alwaysVisible": true} in yuiConfig attribute:

	

	........
	
        

or set alwaysVisible to true via data attribute:

	
 
	........
	
        

4.3 Set "closable" property

Use "yui3-accordion-item-closable" class name in order to make the item closable:

	

	........
	
        

or set "closable" to true in yuiConfig attribute:

	

	........
	
        

or set "closable" via data attribute:

	
 
	........
	
        

4.4 Define content height policy

You can set content height of given item in three ways:

• auto - the browser will calculate content height
• fixed - content height will be exactly X pixels
• stretch - content height will be calculated, based on the height of the other items in the Accordion. For example, lets assume there is Accordion with total height 600px and it has three items added. The content height of the first item is fixed, 200px and the second one is also fixed, 100px. Content height policy of the third item is stretch and it will get the remaining space, which is:
  600 - 25 - 200 - 25 - 100 - 25 = 225px, if we assume 25 is header height in pixels for each item.

In order to set content height policy, you can use fake class names, yuiConfig attribute, or data attribute:

Using fake class names:

• "yui3-accordion-item-contentheight-auto"
• "yui3-accordion-item-contentheight-fixed-[pixels]", where "[pixels]" is number, for example 150
• "yui3-accordion-item-contentheight-stretch"

Using "yuiConfig" custom attribute:

• yuiConfig='{"contentHeight": {"method":"auto"}}'
• yuiConfig='{"contentHeight": {"method":"fixed", "height":[pixels]}}', where "[pixels]" is number, for example 150
• yuiConfig='{"contentHeight": {"method":"stretch"}}'

Using "data" attribute:

• data-contentheight='auto'
• data-contentheight='fixed-[pixels]', where "[pixels]" is number, for example 150
• data-contentheight='stretch'

Example - markup for expanded item with content height set as fixed, 200px by using fake class names:

	

	........
	
        

Example - markup for always visible item with content height set as stretch by using yuiConfig attribute:

	

	........
	
        

Example - markup for always visible item with content height set as stretch by using data attribute:

	

	........
	
        

4.5 Set item's label (optionally)

You can define it in header's markup:

        

             

                Label 1
            
        
        

or set it in "yuiConfig" attribute:

or set it via "data" attribute:

Here is example markup of Accordion with three items:

        

            
 
                

                    

                        
                        Label 1
                        

                            
                            
                            
                        
                    
                    

                        

                            Item1 content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        
                    
                

                

                    

                        
                        Label 2
                        

                            
                            
                            
                        
                    
                    

                        

                            Item2 content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        
                    
                

                

                    

                        
                        Label 3 from markup
                        

                            
                            
                            
                        
                    
                    

                        

                            Item3 content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        
                    
                
           
        

Step three: instantiate 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
        });
        

Step four (optional): add/modify item params right before adding them to Accordion

If you subscribe to "beforeItemAdd" event, you will be able to overwrite all parameters, added from markup or to add new parameters:

accordion.on( "beforeItemAdd", function( attrs ){
    var item, id;

    item = attrs.item;
    id = item.get( "id" );

    if( id === "item1" ){
        item.set( "contentHeight",  {
            method: "fixed",
            height: 150 
        });

        item.set( "alwaysVisible", true );

        item.set( "closable", true );
    } else if( id === "item2" ){
        item.set( "label", "Label2" );

        item.set( "contentHeight",  {
            method: "stretch"
        });

       item.set( "expanded", true );
    } else if( id === "item3" ){
        item.set( "label", "Label3, overwritten" );

        item.set( "contentHeight",  {
            method: "auto"
        });

        item.set( "expanded", true );
    }
}, this );
        

Step five: render the Accordion

The last step is to render the accordion. Render process will look for some items and if found, they will be created authomatically. In this example, there will be created three items.

	 accordion.render();