PDA

View Full Version : Switch Content Script



hexcode99
08-05-2006, 11:00 AM
Switch Content Script
http://www.dynamicdrive.com/dynamicindex17/switchcontent.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:


<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.


<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.


<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.


<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.