PDA

View Full Version : Default Expand all for Accordion Content script (v1.9)



orbitrod
10-25-2010, 07:03 AM
1) Script Title: Accordion Content script (v1.9)

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

3) Describe problem: Does anyone know how to make all content items expanded by default?

ddadmin
10-25-2010, 07:05 PM
Do you know the total number of accordion contents in advanced? If so, you can just manually enter them (their indices) inside the defaultexpanded option:


ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //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: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0,1,2], //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
//do nothing
}
})

orbitrod
10-26-2010, 02:43 AM
Sorry I don't, accordion contents are generated dynamically, could be 4 could be 30

djr33
10-26-2010, 03:50 AM
If you have a variable (or can count something and make a variable) you could automatically insert that into the Javascript on the page using PHP or whatever language you're using to generate the menus.

ddadmin
10-26-2010, 08:30 AM
Sorry I don't, accordion contents are generated dynamically, could be 4 could be 30

In that case, try the below modified .js file. It lets you enter a keyword value of "all" for the defaultexpanded option to indicate that all headers should be expanded by default:


ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //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: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: "all", //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
//do nothing
}
})

orbitrod
10-27-2010, 09:50 PM
If I do

defaultexpanded: "all"

Then nothing is expanded by default.

If I do

defaultexpanded: all

All is expanded by default, but then I lose the ability to contract content items.

ddadmin
10-28-2010, 08:05 AM
Are you using the modified .js file attached in my above post?

orbitrod
10-28-2010, 07:14 PM
Yes I am. Attached are the .js files that I am using.

ddadmin
10-31-2010, 06:24 AM
The value "all" needs to be in quotations, so:


defaultexpanded: "all"

I just tested it again, and it does work in expanding all of the contents when the page first loads. It may be different for you if this is NOT the first time you've loaded that page within a browser session and you HAVE persistence enabled, as persistence starts to kick in for subsequent page loads.

orbitrod
11-09-2010, 04:49 AM
Yes you are right, but then I don't have the capability to contract the expanded containers.

Here is the URL

http://goo.gl/2GBKq

orbitrod
11-21-2010, 12:12 AM
Do you have any other ideas?

jscheuer1
11-21-2010, 10:58 AM
Where you have (from the served source code of the URL you provided):


<script type="text/javascript" src="/themes/2010/accordion_config.js"></script>
<script type="text/javascript" src="/themes/2010/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

It needs to be:


<script type="text/javascript" src="/themes/2010/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="/themes/2010/accordion_config.js"></script>

There could also be other problems, but this much needs to be fixed first.

orbitrod
11-21-2010, 06:50 PM
Wow, thanks John, that worked!

I never thought the order of the scripts would make a difference.