Taking advantage of the oninit() and onopenclose() event handlers

You can customize the behaviour of your Accordion Content through the use of the oninit() and onopenclose() event handlers inside your initialization code.

The oninit(headers,expandedindices) event

The oninit(headers, expandedindices) event is fired once, when your Accordion Content instance has finished loading on the page. It is passed two parameters:

  1. headers: An array referencing every header within your header group as DOM elements
  2. expandedindices: An array containing the indices of the headers within the group that are currently expanded. If no headers are expanded, it returns a blank array ([]).

The oninit(headers, expandedindices) method is convenient when all you wish to do is perform one-time changes to your Accordion Content when it has loaded. Here's an example illustrating how it works:

togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow",

oninit:function(headers, expandedindices){ //custom code to run when headers have initialized on the page
 if (expandedindices.length==0) //if no expanded headers found in array
  alert("No headers open by default")
 else{
  for (var i=0; i<expandedindices.length; i++){ //loop through each expanded header and alert their contents
   alert(headers[expandedindices[i]].innerHTML)
  }
 }
}
})

Highlighting headers that are expanded by default when the page loads Take I

Lets say you want to differentiate headers that are expanded by default when the page loads by giving it a different background color. This versus headers that are expanded when the user explicitly acts on one (click/mouse over). You can accomplish this using just the oninit() event handler, specifically:

  1. Use the oninit(headers, expandedindices) event handler to loop through and access all the headers, by referring to the "headers" parameter of the event
  2. To manipulate only those headers that are expanded, refer to the "expandedindices" parameter containing their indices.

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypetsA", //Shared CSS class name of headers group
contentclass: "thepetA", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [1], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initialized
 for (var i=0; i<expandedindices.length; i++){
  var expandedindex=expandedindices[i] //index of current expanded header index within array
  headers[expandedindex].style.backgroundColor='black'
  headers[expandedindex].style.color='white'
 }
}

})

</script>

Dogs

The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species.

Cats

The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

Rabbits

Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan).

The header(s) that is expanded by default when the page loads gets an explicit black background on white foreground. Load this page again with the 1st header selected or the 3rd header selected by default to see the highlighted header change.

The onopenclose(header,index,state,isuseractivated) event

The onopenclose(header,index,state,isuseractivated) event on the other hand fires whenever a header is opened or closed. This obviously includes whenever a user explicitly acts on a header (click/mouse over), but also, once automatically for each header when the page first loads. This is because technically, each header is being opened and closed when the page loads, albeit automatically without user intervention. In that sense it's similar to the oninit() event handler. Four parameters are passed into the event handler:

  1. header: A DOM reference to the header in question.
  2. index: The index of the header relative to its peers.
  3. state: The header's CSS display state ("block" or "none").
  4. isuseractivated: And finally, a Boolean variable that returns true if this event handler is being fired as the result of the user's explicit action on the header (clicking or mousing over versus automatically).

The onopenclose(header,index,state,isuseractivated) event lets you make changes to every header both when they initially load, and when the user explicitly toggles a header. You can use the "isuseractivated' parameter to differentiate between the two conditions if needed. For example:

togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow",
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block" && isuseractivated==true){ //if header is expanded as a result of the user clicking on it (versus expanded by default when page loads)
  header.style.backgroundColor="black" //change that header's background color to black
 }
}
})

Highlighting headers that are expanded by default when the page loads Take II

Earlier you saw how to use the oninit() event handler to style headers that are expanded by default differently when the page loads. Just to show how onopenclose() operates similarity yet different from oninit(), I'll now use onopenclose() to create the exact same "highlight default expanded headers" behaviour that was done using oninit():

  1. Use the onopenclose() event handler to manipulate each header automatically when the page first loads
  2. To detect when onopenclose() is being fired automatically (versus the user clicking/mousing over a header), probe the "isuseractivated" parameter for a value of false.
  3. To access and manipulate each header, use the "header" parameter.

The result:

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypetsB", //Shared CSS class name of headers group
contentclass: "thepetB", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [1], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block" && isuseractivated==false){ //if header is expanded and NOT as the result of the user 's action (click or mouseover)
  header.style.backgroundColor="black"
  header.style.color="white"
 }
}

})

</script>

Dogs

The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species.

Cats

The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

Rabbits

Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan).

The header(s) that is expanded by default when the page loads gets an explicit black background on white foreground. This is a separate process from that being done on headers that are expanded as a result of the user clicking/mousing over them. Load this page again with the 1st header selected or the 3rd header selected by default to see the highlighted header change.

Doing something whenever the user expands a header

Now to something that might involve both onopenclose() and oninit(). Lets say you have an IFRAME on the page, and you wish to populate it with a different page depending on which header the user chooses to expand. When the page first loads, the IFRAME should automatically be populated already based on the default expanded header as well. You can do this by:

  1. Using the oninit() event handler to get the indices of headers that are expanded by default when the page first loads, and use the very last index to auto populate the IFRAME with a corresponding page accordingly. Using onopenclose() instead to perform this task is a lot more cumbersome, since it's fired more than once (one time for each header), yet the IFRAME should only be populated a single time based on a single expanded header's index (the last if multiple headers are allowed to be open at the same time).
  2. Using the onopenclose() event handler plus its isuseractivated parameter to fire only when the user explicitly expands a header, and update the IFRAME with a different page when that happens.
  3. I'm storing the URL associated with each header to be loaded in the IFRAME inside the title attribute of the header. You can choose a different approach obviously.

<script type="text/javascript">

//Initialize 3rd demo:
ddaccordion.init({
headerclass: "mypetsC", //Shared CSS class name of headers group
contentclass: "thepetC", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 myiframe=window.frames["myiframe"] //reference and cache iframe to populate
 var lastexpandedindex=expandedindices.pop() //get last index within array
 myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
  myiframe.location.replace(header.getAttribute('title'))
 }
}

})

</script>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Greenland_Dog.jpg">Dogs</h3>
<div class="thepetC">
Dog content here...
</div>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Cat_%28634556562%29.jpg">Cats</h3>
<div class="thepetC">
Cat content here...
</div>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Coello_GDFL50.jpg">Rabbits</h3>
<div class="thepetC">
Rabbit content here...
</div>

<iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid black"></iframe>

A demo:

Dogs

The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species.

Cats

The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

Rabbits

Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan).

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post