Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expand/collapse script problem

Status
Not open for further replies.

sorenchr

Programmer
May 11, 2008
7
DK
Hi, I'm currently using an expand/collapse script for my website, however, it seems that it is expanded by default. Now, I know absolutely nothing about javascript, so i was wondering if any of you could help me to get it collapsed by default :)

The script:

<script langauge="JavaScript" type="text/javascript">
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" + item);
if (obj.style.display=="none") {
obj.style.display="block";
}
else {
obj.style.display="none";
}
}
</script>

<a href="javascript:doMenu('main');" id=xmain> Main Item</a>
<div id=main style="margin-left:0em">hi there</div>
 
Try
Code:
<div id="main" style="margin-left:0em; [b]display:none;[/b]">hi there</div>
 
However, if i have several Menu items, like so:


<a href="javascript:doMenu('main');" id=xmain> Main Item</a>
<div id=main style="margin-left:0em; display:none;"> 1 </div> <br>

<a href="javascript:doMenu('main2');" id=xmain2> Main2 Item</a>
<div id=main2 style="margin-left:0em; display:none;"> 2 </div> <br>

<a href="javascript:doMenu('main');" id=xmain3> Main3 Item</a>
<div id=main3 style="margin-left:0em; display:none;"> 3 </div> <br>

<a href="javascript:doMenu('main2');" id=xmain4> Main4 Item</a>
<div id=main4 style="margin-left:0em; display:none;"> 4 </div> <br>

How do i allow the script to have a maximum of 1 expanded menu items? So that it closes any other menu items if you click on a new one.

I create the menu items with php, so the number of menu items are dynamic.
 
Minor change to the code:

<a href="javascript:doMenu('main');" id=xmain> Main Item</a>
<div id=main style="margin-left:0em; display:none;"> 1 </div> <br>

<a href="javascript:doMenu('main2');" id=xmain2> Main2 Item</a>
<div id=main2 style="margin-left:0em; display:none;"> 2 </div> <br>

<a href="javascript:doMenu('main3');" id=xmain3> Main3 Item</a>
<div id=main3 style="margin-left:0em; display:none;"> 3 </div> <br>

<a href="javascript:doMenu('main4');" id=xmain4> Main4 Item</a>
<div id=main4 style="margin-left:0em; display:none;"> 4 </div> <br>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top