New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

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: