PDA

View Full Version : Spry Collapsible Panel issue


ChiLL
06-28-2010, 07:08 PM
Hello,

I have a little problem with the Spry Collapsible Panel,
I would like to add multiple collapsible panels on one page and be able to alter the display of the panels so they are not the same in appearance (different Tab backgrounds ...). How can I do that?

Any help would be much apreciated!

Thanks in advance. :)

using dreamweaver CS4

gentleone
06-29-2010, 01:11 PM
Give them an unique ID and style them in your CSS individually according to the ID's.


<div id="CollapsiblePanel1" class="CollapsiblePanel">
Content Panel 1
</div>

<div id="CollapsiblePanel2" class="CollapsiblePanel">
Content Panel 2
</div>

ChiLL
06-29-2010, 03:04 PM
Hi gentleone,

Thanks alot for your help! I manage to make different styles for the panels but I am still stuck on one part.

It is the ".CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover" I can not figure out how to make them independent from each other (in different panels). The tabs have all different backgrounds exept when I roll over them, the same contenent appears for all the rollovers.

Any tips on that?

Thanks again for your help.

Cheers.

gentleone
06-29-2010, 04:38 PM
If you want to style for instance .CollapsiblePanelTabHover differently than you'll write it like this in your CSS.


#CollapsiblePanel1 .CollapsiblePanelTabHover {
background: #FFF;
}

#CollapsiblePanel2 .CollapsiblePanelTabHover {
background: #CCC;
}

ChiLL
06-29-2010, 04:55 PM
Great man! thanks alot.

Easyer than I thouhg.

Cheers :grin:

djklinger
06-19-2013, 03:44 PM
This works great for 'CollapsiblePanelTabHover' but I can't seem to get it to apply to 'CollapsiblePanelOpen' - any suggestions?