Animated Collapse event handler question

[colindo]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

Im very new to javascript so im a little lost on how to modify the event handler in the Animated Collapse script. I have it all set up and working fine. I figured out how to keep the text on the toggle button to remain a color (red in this case) while the div is expanded. and when i click the toggle button again to collapse the div it returns to the original color (white in the case). This is exactly what I want.

The problem is...by modifying the javascript in the event handler to allow the expanded div to remain a different color then all the other collapsed divs, It seems to override the a:hover I have set up in CSS. I want the text on the buttons to change to red when hovered, but it doesn't work once I modify the javascript in the event handler.

Here is the current event handler 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')? 'red' : 'white')
}

Thanks in advanced

[jscheuer1]

This is actually more of a css question than javascript, though changing the javascript code in your custom function is probably the best way to fix it.

If you add css inline to an element, it overrides any hover, active or visited selectors in the stylesheet. That's just normal css. And that's what you're doing there, adding css inline. You're just doing it via javascript/jQuery.

What you want to do is remove the inline css when the item isn't expanded:

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')? 'red' : '')
}

By changing it to an empty value when it's not expanded, the styles in your stylesheet can continue working.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[colindo]

Thanks a lot. Thats worked perfectly.

another quick question that I've been working on as well...

If im using image hotspots to have the same effect. (The image is white originally and when moused over it swaps to a "red" version of the same image.) How do I attach the id to keep the image swapped to the "red" version while the div is expanded?

here is an example of the hot spot code.

Image1" />
    <map name="Map" id="Map">
      <area shape="circle" coords="59,15,16" href="mailto:colin.ostman@gmail.com" onmouseover="MM_swapImage('Image1','','index images/contact_icons/email.png',1)" onmouseout="MM_swapImgRestore()" />
      <area shape="circle" coords="22,16,14" href="http://facebook.com/colin.ostman" target="_blank" onmouseover="MM_swapImage('Image1','','index images/contact_icons/facebook.png',1)" onmouseout="MM_swapImgRestore()" />
      <area shape="circle" coords="95,14,15" href="javascript:animatedcollapse.toggle('phone')" onmouseover="MM_swapImage('Image1','','index images/contact_icons/phone.png',1)" onmouseout="MM_swapImgRestore()" />
      <area shape="circle" coords="132,16,15" href="javascript:animatedcollapse.toggle('address')" onmouseover="MM_swapImage('Image1','','index images/contact_icons/mail.png',1)" onmouseout="MM_swapImgRestore()" />
    </map>
  </div>