View Full Version : Accordion Menu (Session Cookie Deletion)

11-13-2008, 07:13 PM
1) Script Title: DD Accordion Menu

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

3) Describe problem:

I have successfully applied the Accordion menu on my site's sidebar menu. I have different menus running successfully in different sections/templates on the site. My problem is that I want persistance to apply to only each section. A cookie called "expandable" holds the current state of the menu for all sections.

On the main-menu links to each section I have added the following onlcick event in the hope of deleting the "expandable" cookie before the next sections template loads thereby allowing persistence of the sidebar menu state to apply only for each section. However it doesn't seem to work.

<a href="/1992/" onclick="path='/';domain='www.irisharchitectureawards.ie';document.cookie='expandable=' + ((path) ? '; path=' + path : '') + ((domain) ? '; domain=' + domain : '') + '; expires=Thu, 01-Jan-70 00:00:01 GMT'">1992</a>

You can see what I'm trying to achieve here: http://www.irisharchitectureawards.ie/annual-awards/ (Use the yearly top bar links)

Can the "expandable" cookie be deleted mid-session? Is this the right way to go about it or am I missing something?


11-14-2008, 09:07 AM
I have different menus running successfully in different sections/templates on the site. My problem is that I want persistence to apply to only each section.

It depends what you mean by each section? Do you mean you have more than one Accordion menu on the same page, and you want their persistence to operate independently? This is certainly possible. The script uses the header class name specified in the configuration code as basis for the cookie name for that menu:

headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group

You can give another menu on the same page a different identifying header class to cause the script to store the persistence for it in another cookie.

11-14-2008, 12:25 PM
No that's not what I mean by a section. The issue is probably best served by actually guiding you through the problem on the site:

If you go to


you will see that the content displayed corresponds to the first item under the first header of the accordian menu. Now click another header in the menu, say 'Leinster'. The sub-menu will appear, all is fine so far. Now if you change year by clicking '2000' on the menu above or going to:


the menu will open at the same point/stage that you where at on the previous page i.e. under the second header 'Leinster'. But I want it to open at the first item under the first header as this is the item that corresponds to the content displayed. I realise that this is becaude a cookie is persisting within each browser session. What I want to do is turn off the cookie so that it does not persist at all and that each time you change year the menu opens at the first item under the first header.

I hope this is clearer for you now

11-15-2008, 06:34 AM
Well, turning off persistence in the menu is easy enough:

headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //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: [0], //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?

However, regarding the second part of your question, if I understood you correctly, you're basically asking how to get the menu to auto expand to the one that corresponds to the current page's URL. There's quite a lot of threads on this. Basically, it comes down to doing this yourself based on how your site URLs are structured and what you have at your disposal in matching the current page's URL to one of the menu links. As far as the script is concerned, the best it can do is let you modify your menu links with a URL parameter to explicitly expand a particular menu item on the target page, ie:

<a href="target.htm?headerclass=index1,index2,etc">Target Page</a>

See this page (http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm) for more info.

11-18-2008, 04:05 PM
That's correct, we need it to open on the menu appropriate to the current page.

One issue with your solution:

The urls for our website are 'search engine friendly' type for eg


so they don't end with a .htm or .php file but with a forward slash. Is it still possible to append the

URL parameter in the format - "?headerclass=index1" to this type of URL name?

11-18-2008, 10:38 PM
Hmm to be honest I'm not sure how you'd go about adding a parameter to a URL that ends in a forward slash. One obvious workaround is to include the actual page filename in the URL, then add in the parameter. For example:


This may break away from the way you want search engines to view the URLs on your site, however (all without a page's file name).

11-20-2008, 10:46 AM
thanks...hopefully that should do it