-
This works great, but I have a specific case where certain links have to also change to a different color, so therefore I need to target some specific ID's or classes. I need all of them to change to bold, but I am not getting the specific syntax correct to target a specific ID to change color. Is it also/alternately possible to target a group and apply a set of changes?
Here's the part of the code below that has me a bit stumped:
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
if ($('#'+divobj.id+"-toggle").length==1) //if toggler link exists
$('#'+divobj.id+"-toggle").css('font-weight', (state=='block')? 'bold' : 'normal')
-
To also make toggler links that carry a certain CSS class name (ie: "someclass") bold when expanded, you would extend the code above with the part in red below:
Code:
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
if ($('#'+divobj.id+"-toggle").length==1){ //if toggler link exists
$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
if ($('#'+divobj.id+"-toggle").hasClass('someclass'))
$('#'+divobj.id+"-toggle").css('fontWeight', (state=='block')? 'bold' : 'normal')
}
}
-
Thank you very much! I'm really learning a lot here. One thing I've noticed is that when a link is set to toggle a div and this type of function has been applied to it, the regular css :hover and :active states disappear. I guess this is just the nature of having a script applied to it that overrides normal behavior?
-
Well, when you explicitly change the CSS color of a link, by way of:
Code:
$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
for example, that operation supersedes the color values set in the ":hover" and "active" states. My CSS specificity is a little rusty, but I believe that's the cause. If so, you might instead switch CSS classes instead, in which all states of the link accounted for within the CSS class definition, for example:
Code:
$('#'+divobj.id+"-toggle").get(0).className=(state=='block')? 'greenclass' : 'grayclass'
-
Ah OK. Very interesting and powerful - I forget the power of jQuery sometimes until a specific example like this comes along. I'll have a go at it and if it works I'll let you know. Thanks again for being so kind and helpful!
