This example illustrates how to use the Rico.Accordion behavior to transform a set of divs into a first class accordion component.

The Rico.Accordion behavior makes use of the Effect.AccordionSize which is an effect that simultaneously grows the height of one element while shrinking the height of another. The Rico.Accordion behavior adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering.

The HTML structure is an outer div that holds all of the panels. Then, each panel is just a couple of DIVs (one for the header and one for the content) wrapped in an outer DIV.

<div id="accordionDiv">
   <div id="overviewPanel">
     <div id="overviewHeader">
       Overview
      </div>
      <div id="panel1Content">
       ... content text ...
      </div>
   </div>
</div>

To attach the accordion behavior to the accordion container div, construct a Rico.Accordion object and pass the container to it. Thats it!

new Rico.Accordion( $('accordionDiv') );
 -or-
new Rico.Accordion( $('accordionDiv'), {panelHeight:300} );

The second example specifies the height of the accordion panels. There are many other configuration parameters that can be specified to modify various visual aspects of the accordion. The panelHeight is the attribute that is most commonly overridden.

The content div for each panel should not be styled to have borders, margins, or padding. When padding/margin is required, nest another DIV inside the content div and style it accordingly. Also, the panel content should not grow beyond the panelHeight attribute of the configuration parameter. On Firefox/Mac the scrollbar for an overflow area will cause the scrollbar to always be visible--even when the panel is collapsed. You can resolve this by setting the visibility of the contents when the panel starts to collapse or expand.