Skin rico accordion component

Use Rico.accordion behavior to transform a structured CSS Divs into accordion component.

The Divs that host the accordion component needs to be in a structure like this:

<div id=”accordionInstanceName”>

<div id=”paneNum1″ class=”paneRule”>

<div class=”headerPanel”>Intro</div>

<div class=”contentPanel”>blahblahblah

<div class=”footerPanel”></div>


<!–//other tabs of the accordion component……–>



In order to skin the header, you need to change both the css that sets the style rules for the accordion and the javascript file when instantiating the accordion.

The following example demostrates a way of setting a customized header in an accordion component:

1) Set the background to transparent in the js:

//rico accordion
var options = {
expandedBg : ‘transparent’,//instead of color hex set it to transparent so that the background image wil show through,
hoverBg : ‘transparent’,//’#63699c’,
collapsedBg : ‘transparent’,//’#6b79a5′,
expandedTextColor : ‘#ffffff’,
expandedFontWeight : ‘bold’,
hoverTextColor : ‘#ffffff’,
collapsedTextColor : ‘#ced7ef’,
collapsedFontWeight : ‘bold’,
hoverTextColor : ‘#FFFFFF’,
borderColor : ‘#FFFFFF’,
panelHeight : 366,//370,//325
onHideTab : null,
onShowTab : onShowTab,
onLoadShowTab : 0

accr = new Rico.Accordion(‘accordionDiv’, options);
2) In the CSS:

.contentMod #sidebar .header{
/*some other rules…*/
background: url(img/accr_header.gif) no-repeat;



One Response to “Skin rico accordion component”

  1. Lee Says:

    You can get an improved version in

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: