View Full Version : Spry Collapsible Panel issue

06-28-2010, 06:08 PM

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

06-29-2010, 12: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 id="CollapsiblePanel2" class="CollapsiblePanel">
Content Panel 2

06-29-2010, 02: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.


06-29-2010, 03: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;

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

Easyer than I thouhg.

Cheers :grin:

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