Accordion Menu header link

[STEwebmaster]

1) Script Title: Accordion Menu - urbangrey

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

3) Describe problem: I used urban grey in our new company SharePoint Intranet and the issue is once I click on the header, say COMMUNICATIONS, it expands the menu and goes to the landing page. But then the link in the header no longer works. So if you go to any one of the submenus and want to go back to the landing page, the header link doesn't work. I had to place a link back to the COMMUNICATIONS at the bottom of every subpage to go back to the COMMUNICATIONS landing page. The action in this menu is "clickgo". Is there some javascript to add to any accordion menu to fix this? Is one of the parameters in the setting able to keep the header link active?

Here are the settings:

[<script type="text/javascript">

ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 800, //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: true, //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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, 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>]

[HiPower]

Can anyone help with this problem? I am having the same issue. That is, once a header is expanded, the link within it no longer works. In my case, I use the intial link to populate an iframe. Once a user selects a submenu item, they cannot return to the header landing page without double-clicking the header to first collapse it, then re-expand it. The code I am using is (viewable on my test site at: www.richardmfg.comli.com):

ddaccordion.init({
	headerclass: "silverheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", 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: true, //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: ["", "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: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 	myiframe=window.frames["content"] //reference and cache iframe to populate
 	var lastexpandedindex=expandedindices.pop() //get last index within array
 	myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 	if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
 	myiframe.location.replace(header.getAttribute('title'))
}
}
})

[ddadmin]

Hipower:
The link you posted currently doesn't work (says it's under review). When it does please post a heads up and I'll check it out.

[HiPower]

Yeah. Sorry about that. Their review was taking too long so I uploaded to a different free host for testing. The new link is: http://richardmfg.zzl.org/

Thanks for taking a look!

[HiPower]

Is there anyone that might be able to help with this? Seems like I am missing something simple, but I am brand new to coding.

[ddadmin]

Sorry for the delay in response. Testing out the left accordion menu on your page, everything seems to be in order for me actually. I don't see a "COMMUNICATION" header. Can you please describe in point form the exact steps to take once on your site to see the issue you're talking about?

[HiPower]

No worries, thanks for the response. The specific problem I am having is:
-When you open the page and select a menu header (such as "PRODUCTS"), it expands normally and the iframe in the middle of the page is loaded with my landing page for "products"
-If you select a submenu item (such as "WIRING HARNESSES") the page in the iframe changes accordingly to my "wiring harnesses" page
-The problem occurs if you want to return to the "PRODUCTS" landing page. If you click on the menu header for "products again", it only closes the menu. It does not return the iframe to the "products" landing page.

again, the test site is: http://richardmfg.zzl.org

Thanks for looking!

[ddadmin]

Ah ok I see what you mean now. This is actually how the menu was designed to behave- closing of a header doesn't trigger the navigating to the header's destination, as otherwise, when you expand another header, the browser would try and go to both the contracting header's link plus the expanding one's. I'll see if I can tweak the script to only go to the contracting header's link when no other headers are being expanded at the same time. Stay tuned.

[HiPower]

Sounds great. I appreciate it. Additionally, I have it set to contract the header if you click it again. It is my intention to turn that off once all this is resolved.

[ddadmin]

Ok, firstly, inside ddaccordion.js, try adding the line in red below to the following line:

				var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
				config.$lastclicked = $(this)

With the addition added, try extending your initialization code with the code in red:

ddaccordion.init({
	headerclass: "silverheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", 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?
	toggleclass: ["", "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: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 	myiframe=window.frames["content"] //reference and cache iframe to populate
 	var lastexpandedindex=expandedindices.pop() //get last index within array
 	myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 	if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
 		myiframe.location.replace(header.getAttribute('title'))
	}
	else if (state=="none" && isuseractivated==true && this.$lastclicked.get(0) == header){
		myiframe.location.replace(header.getAttribute('title'))
	}
}
})

This should do the trick.