Switch Content Script

**NTSsupport** · 10-19-2005, 06:47 PM

Script: Switch Content Script
http://dynamicdrive.com/dynamicindex...tchcontent.htm

Thanks DD for creating such a great script. I have been able to modify the script to my liking so far.

I have one small problem that I am sure someone can point out to me right away. I would like to have sub sub links under some of the headings.
This works when the variable collapseprevious set to no.
When set to yes it collapses the menu (as it is supposed to), but I don't want it to for a sub menu.

In the javascript code I have the following set:

Code:

var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

Here is my html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" src="/scripts/menu.js"></script>
<title>Untitled Document</title>
</head>

<body>
<h3 onClick="expandcontent(this, 'sub1')"><span class="showstate"></span>Heading 1</h3>
<div id="sub1" class="switchcontent">
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
		<li>Link 4</li>						
	</ul>
</div>

<h3 onClick="expandcontent(this, 'sub2')"><span class="showstate"></span>Heading 2</h3>
<div id="sub2" class="switchcontent">
	<ul>
		<li onclick="expandcontent(this, 'subsub2')">Link 1</li>
			<div id="subsub2" class="switchcontent">
				<ul>
					<li>Sub Link 1</li>
					<li>Sub Link 2</li>
					<li>Sub Link 3</li>
					<li>Sub Link 4</li>						
				</ul>
			</div>
		<li>Link 2</li>
		<li>Link 3</li>
		<li>Link 4</li>						
	</ul>
</div>

<h3 onClick="expandcontent(this, 'sub3')"><span class="showstate"></span>Heading 3</h3>
<div id="sub3" class="switchcontent">
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
		<li>Link 4</li>						
	</ul>
</div>
</body>
</html>

Any help would be greatly appreciated.

Thanks for your time and help.

**NTSsupport** · 10-21-2005, 06:29 PM

Nobody knows how to get around this???

**ddadmin** · 10-21-2005, 07:08 PM

Ok, the below changes lets you selectively disable the "collapseprevious" behavior for a particular switch content. In other words, it lets you collapse/expand a sub content within a switch content without affecting the entire switch content.

First, replace function expandcontent() within the code of step 1 with:

Code:

function expandcontent(curobj, cid, collapseprev){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes" && typeof collapseprev=="undefined")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

Then, for the sub content, change the HTML code to:

Code:

<li onclick="expandcontent(this, 'subsub2', 'disablecollapse')">Link 1</li>

Notice the extra "disablecollapse" parameter added in this case.

**NTSsupport** · 10-25-2005, 09:09 PM

ddadmin,

Thank you for your response and fix to my question.
It works just as I requested it to.
I really appreciate you taking the time to help me out.

I have another question now that builds off of this scenario.

After working with the script a bit more I noticed that if I wanted to subsub menus under the original main heading, it does not collapse the previous subsub menu.
(Highlighted in orange in the code below)

Code:

<body>
<h3 onClick="expandcontent(this, 'sub1')"><span class="showstate"></span>Heading 1</h3>
<div id="sub1" class="switchcontent">
	<ul>
		<li>Sub Heading 1.1</li>
		<li>Sub Heading 1.2</li>
		<li>Sub Heading 1.3</li>
		<li>Sub Heading 1.4</li>						
	</ul>
</div>

<h3 onClick="expandcontent(this, 'sub2')"><span class="showstate"></span>Heading 2</h3>
<div id="sub2" class="switchcontent">
	<ul>
		<li onclick="expandcontent(this, 'sub2sub1', 'disablecollapse')">Sub Heading 2.1</li>		
			<div id="sub2sub1" class="switchcontent">
				<ul>
					<li>Sub Heading 2.1.1</li>
					<li>Sub Heading 2.1.2</li>
					<li>Sub Heading 2.1.3</li>
					<li>Sub Heading 2.1.4</li>						
				</ul>
			</div>
		<li onclick="expandcontent(this, 'sub2sub2', 'disablecollapse')">Sub Heading 2.2</li>		
			<div id="sub2sub2" class="switchcontent">
				<ul>
					<li>Sub Heading 2.2.1</li>
					<li>Sub Heading 2.2.2</li>
					<li>Sub Heading 2.2.3</li>
					<li>Sub Heading 2.2.4</li>						
				</ul>
			</div>
		<li>Sub Heading 2.3</li>
		<li>Sub Heading 2.4</li>						
	</ul>
</div>

<h3 onClick="expandcontent(this, 'sub3')"><span class="showstate"></span>Heading 3</h3>
<div id="sub3" class="switchcontent">
	<ul>
		<li>Sub Heading 3.1</li>
		<li>Sub Heading 3.2</li>
		<li>Sub Heading 3.2</li>
		<li>Sub Heading 3.4</li>						
	</ul>
</div>
</body>

Is it possible to make the script function as it should normally, but now a couple of layers into the script as well??

I hope I explained it well enough.
Please let me know if you would like a better explanation.
Forgive me, but I am not as gifted as you in the ways of Javascript yet.

I really truly appreciate you taking the time to help me out.

Thanks again for everything,

NTSsupport

**NTSsupport** · 10-25-2005, 09:30 PM

Just an idea.
I may be way off base here.

Maybe have a way to make the subsub menu collapse to its parent object instead of the script as a whole?

Does that make any sense?

**ddadmin** · 10-26-2005, 07:02 AM

Hmm if I understand correctly then, you want it so that when clicking:

Sub Heading 2.2

for example to expand its sub list, you want:

Sub Heading 2.1

and its sub list to collapse at the same time?

**NTSsupport** · 10-26-2005, 02:04 PM

You are correct.
That is exactly what I am looking for it to do.

**ddadmin** · 10-31-2005, 08:53 PM

Hmmm this could be a little tricky. I'll have to revisit this thread later this week to try and find time for a solution.

**NTSsupport** · 11-01-2005, 05:29 PM

ddadmin,

I really appreciate you taking the time to look into this.
I just thought that the script would work that way initially.

Thanks again for your help.
I will keep checking back.

Respectfully,

NTSsupport

**NTSsupport** · 01-05-2006, 07:01 PM

DDAdmin,

Just checking in to see if you were able to come across a way to make the script function as we have discussed in the previous few posts?

Thanks again for your time and help.
I appreciate it.

Thanks,

NTSsupport

Thread: Switch Content Script

Thread Tools

Search Thread