PDA

View Full Version : Accordion menu stop working after few clicks!



evelynk
09-16-2010, 04:32 PM
1) Script Title: Accordion Menu (Glossy)

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

3) Describe problem:

I was almost successful in implementing the accordion style menu on my site by using the click function to show and hide the drop down menus. My case is a little different as I replace the submenus with graphics.

HOWEVER, after the first and second click to expand and collapse the menu, I can no longer continue clicking. The page seem have froze or perhaps the script is having trouble processing images? Please help me if you can tell me what's wrong. I literally followed the HTML code provided by replacing the images and removing some CSS styling.

http://www.bhs.umn.edu/public-health/dropdownmenu.htm

Appreciate if you could help troubleshoot. Thanks.

ddadmin
09-16-2010, 07:53 PM
You should remove the oninit and onopenclose event handlers from your initialization code, as you're not populating any IFRAME at the same time. In other words, you should end up with just:


<script type="text/javascript">

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: false, //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
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: 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='images/plus.gif' class='statusicon' />", "<img src='images/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"
})

</script>