logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-28-2010, 07:08 PM   #1
ChiLL
 
Join Date: Jun 2010
Posts: 3
Question Spry Collapsible Panel issue

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

Last edited by ChiLL; 06-28-2010 at 07:12 PM.. Reason: aded dreamweaver version
ChiLL is offline   Reply With Quote
Old 06-29-2010, 01:11 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Give them an unique ID and style them in your CSS individually according to the ID's.

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

<div id="CollapsiblePanel2" class="CollapsiblePanel">
Content Panel 2
</div>
gentleone is offline   Reply With Quote
Old 06-29-2010, 03:04 PM   #3
ChiLL
 
Join Date: Jun 2010
Posts: 3
Default

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.
ChiLL is offline   Reply With Quote
Old 06-29-2010, 04:38 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

If you want to style for instance .CollapsiblePanelTabHover differently than you'll write it like this in your CSS.

Code:
#CollapsiblePanel1 .CollapsiblePanelTabHover {
    background: #FFF;
}

#CollapsiblePanel2 .CollapsiblePanelTabHover {
    background: #CCC;
}
gentleone is offline   Reply With Quote
Old 06-29-2010, 04:55 PM   #5
ChiLL
 
Join Date: Jun 2010
Posts: 3
Default

Great man! thanks alot.

Easyer than I thouhg.

Cheers
ChiLL is offline   Reply With Quote
Old 06-19-2013, 03:44 PM   #6
djklinger
 
Join Date: Jun 2013
Posts: 2
Default

This works great for 'CollapsiblePanelTabHover' but I can't seem to get it to apply to 'CollapsiblePanelOpen' - any suggestions?
djklinger is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:05 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com