Using ontoggle Event Handler to modifying css of "Toggle Button"

[telephonefield]

1) Script Title: Animated Collapsible DIV (ontoggle Event Handler)

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

3) Describe problem:

Not so much a problem, rather a simple question of modifying the ontoggle event handler to change some simple .css of the element being toggled.

Instead of changing the src image of the "Toggle Button" I'd like to simply change it's class. Although, I'm also interested in knowing how to change ANY .css property of the button (color, font-size, etc.).

So, in the provided code for the Event Handler what would I need to change in order to assign a NEW class to the "Toggle Button"?

[ddadmin]

The procedure is very similar. First, make sure the toggle button currently being toggled is the one you want to manipulate, then just change its CSS class name using JavaScript.

Assuming your toggler buttons carry the id "somename-toggler", and the corresponding collapsible DIV just "somename", here is a sample ontoggle event definition:


animatedcollapse.ontoggle=function($, divobj, state){
if (divobj.id=="peter" || divobj.id=="sarah") //only react to collapsible DIV named "peter"
document.getElementById(divobj.id+"-toggle").className=(state=="block")? "opened" : "closed"
}

Changing CSS properties is exactly the same, via obj.style.cssproperty=value.

[telephonefield]

Thanks! Exactly what I needed to know : ).

I'll try it out later today... can't wait!