ontoggle($, divobj, state)
event handler
Want to perform certain actions each time a DIV is expanded or collapsed? The
ontoggle event
handler lets you do just that. It should be defined in the same location in the
HEAD section of your page along with the rest of the initialization code but
proceeding animatedcollapse.init():
animatedcollapse.ontoggle=function($, divobj, state){
//fires each time a DIV is expanded/contracted
//your code here
}
animatedcollapse.init()
This function is automatically passed 3 parameters each time it's fired, which
is after the DIV has come to its resting state. For example, after clicking on a
collapsed DIV to expand it, ontoggle fires once when the DIV has
fully expanded (not before or in between). It's passed 3 parameters to provide
details on the DIV in question plus its resting state:
- $: Gives you access to jQuery within the function
- divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
- state: "block" or "none", depending on state
ontoggle fires not just when you explicitly expand/collapse a
DIV, but also once for every Collapsible DIV on the page automatically when it
first loads. The below basic example alerts the ID of
each DIV plus its state whenever its state changes. As mentioned, this includes
once for each DIV when the page loads, and then whenever the user explicitly
expands or contracts a DIV:
animatedcollapse.ontoggle=function($, divobj, state){
alert("1) DIV ID: " + divobj.id + "\n2) Current State: "+state)
}
Playing/stopping a Flash movie based on the state of a DIV
Time for something more practical using ontoggle. Lets say
inside each of your collapsible DIVs you have a Flash move that can be played
and stopped using JavaScript. You only want the movie to start playing when the
DIV has expanded, and stop it when it's collapsed (otherwise, the movie may
continue to play and be heard in the background). This can be done using
ontoggle, (assuming again your Flash movie itself can be played/stopped
using JavaScript). Your ontoggle code and HTML may look something
like the following:
ontoggle code:
animatedcollapse.ontoggle=function($, divobj, state){
if (divobj.id=="peter"){ //if "peter" DIV is being toggled
if (state=="block") //if div is expanded
document.getElementById('peterflashobj').play() //play movie
else
document.getElementById('peterflashobj').stop() //stop movie
}
else if (divobj.id=="sarah"){ //if "sarah" DIV is being toggled
if (state=="block") //if div is expanded
document.getElementById('sarahflashobj').play()
else
document.getElementById('sarahflashobj').stop()
}
}
HTML:
<a
href="javascript:animatedcollapse.toggle('peter')">Toggle Peter DIV</a>
<div id="peter" style="width: 300px; background: #FFFFCC; display:none">
<object id="peterflashobj"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<embed src="simplemovie.swf"></embed>
</object>
</div>
<a href="javascript:animatedcollapse.toggle('sarah')">Toggle Sarah DIV</a>
<div id="sarah" style="width: 300px; background: #D2FBFF; display:none">
<object id="sarahflashobj"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<embed src="simplemovie.swf"></embed>
</object>
</div>
As you can see, you can use divobj.id to quickly identify the
current DIV object being operated on, and react accordingly.
Table Of Contents
This script consists of an index page plus one supplementary page: