Accordion Menu script (force style)

[Sleepy Weasel]

1) Script Title: Accordion Menu script (Arrow Side menu)

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

3) Describe problem:

Hello guys,

I have been using the dd accordion menu for a while now and it has been working great with the exception of one small detail. Half of my menu items are headers with UL content list, the other half are just links without contents. As long as I click on a header that has content under it (using any method: click, clickgo, mouseover) I will be taken to the next page and the previous header will close and the current pages content will remain open. However, if I click one that does not have contents the previous header contents will remain open once I am taken to the next page.

Is there a way to get the menus to always close when going to a new section, regardless if the new section has contents or not?

Example: From the scripts page above. If a person was on the "CSS Library" page and then clicked the "Forums" link. Could it keep the CSS Library contents closed and just have the Forums link highlighted.

I have also tried setting the styles and classes manually and setting persiststate to false. However when I do this the script always overwrites my display:block on the current sections contents and sets it back to none. If there was a way to stop it from doing this that would be beyond fantastic.

edit: in short, is there a way to always collapse the content of the current open header when a link is clicked (any link, not just a link that has contents of its own)

[ddadmin]

You can try adding an onClick event handler inside those arbitrary links that will contract all of the header contents for a particular accordion content group when clicked on.


<div class="arrowsidemenu">

<div><a href="http://www.dynamicdrive.com" title="Home" onClick="jQuery('.menucontents').hide()">Home</a></div>
<div class="menuheaders"><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS Library</a></div>
<ul class="menucontents">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<div><a href="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></div>
<div class="menuheaders"><a href="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></div>
<ul class="menucontents">
<li><a href="http://www.javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
</ul>
<div><a href="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></div>

</div>

where "menucontents" is the shared CSS class of the contents within the accordion group. Clicking on "Home" in this case cases the accordion contents to collapse before navigating to the page in question.

[Sleepy Weasel]

Thanks! That is so simple it works perfectly!

It does just snap is close though. Is it possible to steal the animate effect the script itself is using?



onClick="jQuery('.sectionContents').hide('slide', { direction: 'down' }, 1000)"


works, but it animates ever single section and not just the one currently open.

[ddadmin]

I purposely avoided using animation in this case, since depending on how quickly the browser loads the link that was clicked on, the accordion contents may not have fully closed in time (due to the animation), resulting in some of the contents remaining open on the target page. The only way to guarantee all of the contents are closed is to close them immediately in this case...

[Sleepy Weasel]

Good point, I'll keep it as is.

Thanks again for the help