Results 1 to 5 of 5

Thread: Accordion Jquery Menu

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

    Default Accordion Jquery Menu

    1) Script Title: Arrow Side Menu (accordion)

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

    3) Describe problem:

    Okay I am a newbie to javascript and jquery so any help on this matter would be gratefully received, I will try my best to explain the problem I am having but please ask if its not clear.

    I have implemented the arrow side menu and it seems to be working successfully at the following url;

    http://www.abaserv.co.uk/accordion_menu.html

    This is exactly how I want my menu to work, however, all of these links currently have no "a href" url, they are all set to #. In my final menu all of these need to be references to a page, i.e. index.html. When I put these links in, the accordion no longer works how I would like it to.

    Please find my final menu at the following url;

    http://www.abaserv.co.uk/accordion_menu_home.html

    You will see that all of these links to another page with exactly the same menu on. The accordion works for the "accommodation" and "gallery" links. However if you click on "accommodation" then on "home" ideally I would like the "accommodation" accordion to close, this is what is not working for me.

    I have not altered the original ddaccordion.js file in any way. But I have added the following code inline for the links with no submenus;

    [CODE]onclick="ddaccordion.collapseall('menuheaders')"[CODE]

    As I said I am new to javascript and jquery, but it is almost like this onclick function is not working when the page is loaded, or it is working on the previous page, but the new page seems to remember that the "accommodation" header is "selected".

    Any help would be gratefully received, many thanks for any help in advance.

    Jude

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

    Default

    Inside your initialization code for the menu on each page, try disabling persistence:

    Code:
    <script type="text/javascript">
    
    //Initialize Arrow Side Menu:
    ddaccordion.init({
    	headerclass: "menuheaders", //Shared CSS class name of headers group
    	contentclass: "menucontents", //Shared CSS class name of contents group
    	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", 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.
    	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: ["unselected", "selected"], //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: 500, //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
    	}
    })
    
    </script>
    DD Admin

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

    Default

    Many thanks for your help, I have tried this, and while I am sure this has solved the problem, it has brought about another problem. Now when the link is clicked with a submenu, the submenu drops open, the page loads and the sub menu is nowhere to be seen, it only displays for a few seconds while the page is loading.

    Please take a look at the updated menu with the persist state changed to false to see my new problem.

    http://www.abaserv.co.uk/accordion_menu_home.html

    Many thanks again for any help

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It appears as though you want each page to display only its menu item expanded. You may use the menu's defaultexpanded property on each page to set which menu item if any will be expanded, ex (for the accordion_menu_gallery.html page):

    Code:
    <script type="text/javascript">
    
    //Initialize Arrow Side Menu:
    ddaccordion.init({
    	headerclass: "menuheaders", //Shared CSS class name of headers group
    	contentclass: "menucontents", //Shared CSS class name of contents group
    	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", 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: [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: ["unselected", "selected"], //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: 500, //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
    	}
    })
    </script>

    See the main index page for this menu:

    http://www.dynamicdrive.com/dynamici...daccordion.htm

    for more information.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Worked a treat, with the two solutions combined my menu is working just how i wanted it to many thanks for all your 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
  •