Rico-Basic-Accordion

Rico JavaScript DHTML


            




Rico


Rico.loadModule('Accordion');
Rico.onLoad( function() {
  new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
                      {panelHeight:200, hoverClass: 'mdHover', selectedClass: 'mdSelected'});
});


body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.panelheader {
  background-color : #6b79a5;
  height: 26px;
  color : #ced7ef;
  font-weight : normal;
  border-bottom:1px solid #182052;
  border-top:1px solid #BDC7E7;
  font-weight : normal;
  padding-left: 5px;
}
.mdHover {
  background-color : #63699c;
  color : #ffffff;
}
.mdSelected {
  background-color : #63699c;
  color : #ffffff;
  font-weight : bold;
  
}
.panelContent {
  border : 1px solid #1f669b;
  border-top-width    : 0px;
  border-bottom-width : 0px;
  font-size: smaller;
  overflow: auto;
}
#accordionExample {
  margin-top : 6px;
  border : 1px solid #4f4f4f;
  width: 500px;
}



Rico Basic Accordion

    src="examples/client/images/valid-html401.png"
    alt="Valid HTML 4.01 Strict" height="31" width="88">


  
      
        
          Overview


        
         
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 is actually a very simple component built off of Rico behaviors and effects.
        It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
        and hovering.

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

    new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent') );
     -or-
    new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
                        {panelHeight:200,
                         hoverClass: 'mdHover',
                         selectedClass: 'mdSelected'}} );