View Full Version : Resolved Glossy Accordion Menu Script Help - Menu won't collapse

05-28-2009, 11:25 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: I just took over managing our website from a previous IT person (I know almost nothing about website building so bear with me). He has the glossy accordion script built in. Suddenly it won't collapse the previous menu when you click on a new menu. The problem is specifically on our website (www.nationalcontainersales.com) when you click on "Financing" and then try to move to another menu. I have triple checked the coding but I just can't figure it out.

No need to include source code

05-29-2009, 06:41 AM
There's nothing wrong with your menu per say, just the way it's set up that's leading to this behavior. Basically, you have the headers set to be clickable themselves as well, so as soon as you click on the header, the page changes. That in itself is fine, but you also have the headers set to persist state, so as soon as the user gets to the target page, the script recalls the last known state of header based on the previous page.

In a nutshell, you should first:

1) Replace the current ddaccordion.js file on your site with the latest version found here (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm).

2) Also, replace your current jQuery library reference:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

With the below instead:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

3) Finally, inside your initialization code, add to it the lines in red:

<script type="text/javascript">

headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "clickgo", //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: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
//do nothing


That should do it.

05-29-2009, 04:20 PM
That totally fixed my problem and made me look like I knew what I was doing to boot! Thanks!