PDA

View Full Version : Switch Content script - how to...



babyewok
03-04-2008, 06:38 PM
I have been playing around with the switch content script: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm and have managed to make the headers into nice css rollovers. What I need to know is if there is a way to alter the 'open' state of the header other than just change the text colour with Instance.setColor(openheaderColor, closedheaderColor).

Basically, I want the open state to look the same as the hover state (see current css below). Is there some way that I can assign a css class to the open state?



<style type="text/css">
h3 {
padding: 9px 0 9px 5px;
font-size: 14px;
background-image: url(images/portfolio-rollover2.gif);
color: #0b2e71;
cursor:pointer;
font-weight:bold;
margin: 5px 0;
}
h3:hover {
color: #fff;
background-image: url(images/portfolio-rollover2.gif);
background-position: 0 -34px;
}
</style>

I look forward to your suggestions.

ddadmin
03-05-2008, 03:50 AM
Sure, try the below modified switchcontent.js file. It adds a setClass() function, so you can now toggle the header's CSS class name when initializing the script:


var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.setClass('openclass', 'closedclass')
joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()

babyewok
03-05-2008, 11:31 AM
Awesome! Thanks - that's exactly what I needed. :)