PDA

View Full Version : How to open all accordion sections by default



karlajw
02-10-2013, 12:55 AM
1) Script Title: DD Accordion

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

3) Describe problem:

Is there a way to have all the accordion sections open by default?

I'm thinking that I'll need to use expandall from within oninit. Is that the correct/only way to do it?

Thanks,
Karla

ddadmin
02-10-2013, 01:51 AM
You can call the expandall() function to do this, but a more streamlined way is to configure the initialization code for this instead. Using the default initialization code as an example, the settings in red should do cause all the headers to be expanded when they load:



<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0,1,2,3,4], //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?
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
persiststate: true, //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
//do nothing
}
})

For the defaultexpanded option, set it to the indices of all of the headers in your group, and also make sure onemustopen is set to false.

</script>