Rico-Accordion-with-Memory

Rico JavaScript DHTML


            




Rico


Rico.loadModule('Accordion');
Rico.onLoad( function() {
  new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
                      {panelHeight:200, hoverClass: 'panelHover', selectedClass: 'panelSelected', cookieName: 'Rico.AccCookie'});
});


body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
#accordionExample {
    border : 1px solid #4f4f4f;
    width: 650px;
}
.panelheader{
  background-image: url('rico21/examples/client/images/example1_panelBG.png');
  height: 22px;
  color : #ECECEC;
  font-weight : normal;
  padding-left: 5px;
}
.panelHover {
  background-image: url('rico21/examples/client/images/example1_panelBGHover.png');
  height: 22px;
  color : #ffffff;
  padding-left: 5px;
}
.panelClicked {
   background-image: url('rico21/examples/client/images/example1_panelBGClick.png');
   height: 22px;
   color : #ffffff;
   padding-left: 5px;
}
.panelSelected {
  background-image: url('rico21/examples/client/images/example1_panelBGSelected.png');
  height: 22px;
  color : #494949;
  font-weight : bold;
  padding-left: 5px;
}
.panelContent {
    background-image: url('rico21/examples/client/images/example1_contentBG');
    background: #f8f8f8;
    overflow: auto;
}



Rico Accordion with Memory
This example remembers the panel you had open the
last time you visited. Simply provide a value for options.cookieName. This option
also applies to tabbed panels. By default, the cookie value is only remembered
for the current session. To have it persist longer, also set options.cookieDays.


     
         
           
             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'}} );