Results 1 to 5 of 5

Thread: Accordion Menu script (force style)

  1. #1
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Accordion Menu script (force style)

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-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)
    Last edited by Sleepy Weasel; 11-02-2010 at 02:13 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

    Code:
    <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.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    Sleepy Weasel (11-01-2010)

  4. #3
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

    Code:
    onClick="jQuery('.sectionContents').hide('slide', { direction: 'down' }, 1000)"
    works, but it animates ever single section and not just the one currently open.
    Last edited by Sleepy Weasel; 11-01-2010 at 09:57 PM.

  5. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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...
    DD Admin

  6. #5
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Good point, I'll keep it as is.

    Thanks again for the help

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •