Switch Content Script

**hexcode99** · 08-05-2006, 11:00 AM

Switch Content Script
http://www.dynamicdrive.com/dynamici...tchcontent.htm

Hi,

This is really a great script but I have a question.

How could I have it so each "Expand and Contract" would only control the menu it's listed with and not all the rest? For example; clicking "Expand or Contract" in "Menu 1" would not affect anything in "Menu 2". The only way anything in "Menu 2" changes is if its "Expand or Contract" is clicked.

I hope you understand what I mean and any help would be great.

Thanks!

=======Menu 1==========

Expand | Contract

Test1
|----1
Test2
|----2
Test3
|----3

=======Menu 2==========

Expand | Contract

Test1
|----1
Test2
|----2
Test3
|----3

**mburt** · 08-05-2006, 04:35 PM

Try this:

Code:

<html>
<head>
<script type="text/javascript">
function expand(id) {
var obj=document.getElementById(id)
obj.style.display="block"
}
function contract(id) {
var obj=document.getElementById(id)
obj.style.display="none"
}
</script>
</head>
<body>
<a href="javascript:expand('menu1')">Expand</a>
||
<a href="javascript:contract('menu1')">Contract</a>
<br><div id="menu1">
Menu 1
<br>Line 1
<br>Line 2
<br>Line 3
</div>
<br><a href="javascript:expand('menu2')">Expand</a>
||
<a href="javascript:contract('menu2')">Contract</a>
<br><div id="menu2">
Menu 2
<br>Line 1
<br>Line 2
<br>Line 3
</div>
</body>
</html>

**hexcode99** · 08-05-2006, 09:46 PM

Hi,

I've got it working how I want. I just can't use more then one "Expand or Contract" I guess.

Thanks

**ITS Net Services** · 08-12-2006, 07:32 PM

Just to provide some more information on this.

To use more than one instance of this script you must make sure to have unique id's for each time the script is present.

I.E.

Code:

<h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="sc1" class="switchcontent">

For menu 1 i would use id's something like this.

Code:

<h3 onClick="expandcontent(this, 'a1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="a1" class="switchcontent">

<h3 onClick="expandcontent(this, 'a2)" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="a2" class="switchcontent">

For menu 2 i would use id's something like this.

Code:

<h3 onClick="expandcontent(this, 'b1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="b1" class="switchcontent">

<h3 onClick="expandcontent(this, 'b2)" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
<div id="b2" class="switchcontent">

And for example, if you were to want to include a 3rd instance of the script. You could start the id's for menu 3 with c1, c2, c3...etc...

Hope that helped a little bit.

Thread: Switch Content Script

Thread Tools

Search Thread

Switch Content Script

Bookmarks

Bookmarks

Posting Permissions