Animated Collapsible Div

[dannyboy83]

1) Script Title: Animated Collapsible Div

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

3) Describe problem: "pixels" appearing in firefox on click with toggle function. In IE, the "hover" state of the link persists.

In Firefox (I'm on version 3.0.7), When clicking the hyperlink (My hyperlink text within a H1 tag), a few pixels appear, like a tiny box. The pixels disappear when clicking "off" the link.

Sorry I can't share a live link, it's a local test site. Seems like clicking doesn't "switch off" the hover state. The hover state doesn't show in F for some reason!

FF Screenshot: http://www.gaelcommunity.com/temp/pixels_collapsible.gif

IE Screenshot: http://www.gaelcommunity.com/temp/hover_collapsible.gif

[ddadmin]

You'll have to clarify what you mean by the "hover state". Are you referring to use of the "ontoggle" event handler? You could set up a simple public test page to better help illustrate the issue.

[dannyboy83]

Hi, thanks for replying.

If it were a normal text hyperlink... when you mouseover (hover) on it, it would probably change colour or show an underline, depending on what you've set in CSS. Moving the mouse away, would make the link revert back to it's normal state.

What I mean is, when I click the hyperlink to toggle the hide/show status of the collapsible DIV, the hyperlink stays in it's hover/rollover state, even if I move the mouse away. It doesn't "reset" until I click on something else.

Basically, I want the hyperlink to change to it's normal state (non-hover) when clicked.

If that still doesn't make sense, I'll try and put together an example page.

[ddadmin]

Well, there is nothing in the script that should affect the CSS hover state of the toggler links- they are just regular links you set up yourself on the page, for example:


<a href="javascript:animatedcollapse.toggle('jason')">Toggle Jason</a>

I don't really see how, but it's possible the JavaScript link (javascript:) used by default above may be confusing the CSS intepretator for some reason. If so, just change the above to:


<a href="#" onClick="animatedcollapse.toggle('jason');return false">Toggle Jason</a>