index

javascript Rico accordion

please have a look at http://openrico.org/
 
Overview
p1
p2
HTML Code

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>
Rico Code

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.
Important Note

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.