Swith Content: Changing background-color

[abbeyvet]

1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem:

In addition to changing the text color in the content header when it is active, I would like to be able to change the background-color.

I have styled the content headers with CSS, as below, so that they appear as tabs:

span.handcursor {
padding:2px 4px;
background:#eeeeee;
border:1px solid #ccc;
margin-right:3px;
}

If I wanted to alter the background to, say, #9999cc when the header was active, how would I go about that?

I am challenged to say the least when it comes to JavaScript, so my attempts to make this happen by adding some stuff to the script have thus far been unsuccessful.

I would welcome any suggestions as to how to make this happen.

[abbeyvet]

Sorry about the terrible spelling in my post title - in my defence it is after 2am here and my brain is addled trying to make this work :(

[techno_race]

Read this:
x

[abbeyvet]

Thanks for your reply, but I'm afraid I cannot link to the page - it's not available to link to as it's on an intranet.

I am using the vanilla script anyway, the only changes I have made are in the CSS, so I'm not really sure that a link would help much anyway.

[thetestingsite]

Take a look at this demo: http://phphost.smackum.com/dd/switchcontent.html

In the css, simply make a reference to the class name (in this case, switchgroup1 and switchgroup2).

Hope this helps.

[abbeyvet]

Thanks, that would probably have done it, but I worked it out a different way, which I am posting here in case it's of use to anyone.

What I did was add stuff to the script itself relating to background. I used the way color was handled as an example. So, I found this:

switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
this.colorOpen=openColor
this.colorClosed=closeColor
}

And added this below it:

switchcontent.prototype.setBackground=function(openBackground, closeBackground){ //PUBLIC: Set open/ closing background of switch header. Optional
this.backgroundOpen=openBackground
this.backgroundClosed=closeBackground
}

And so on for every instance of 'color' in the script.

Then on the page I inserted this line into the javascript:

reg.setBackground('#bf7360', '#eeeeee')

It works like a charm and I am a happy (if extremely tired) bunny. :)