Basic DHTML Menu erweitern

M-GT

Erfahrenes Mitglied
Also in euren Tutorials habe ich das hier gefunden:

HTML:
<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";
d.getElementById("cat3").style.display="none";
d.getElementById(divid).style.display="inline";

}
//-->
</script>

<a href="#" onclick="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
<a href="#" onclick="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
<a href="#" onclick="show('cat3')">Category 3</a><br>
<div id="cat3" style="display:none">
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>


Jo guit soweit alles ok, wenn ich jez auf einen der Links klicke klappt er aus, und wenn ich auf einen anderen klicke klappt der aus und der andere wieder ein...

ABER, was hjier noch nicht geht ist das das wenn ich einmal auf einen drauf klicke das er ausklappt und wenn ich NOCHMAL auf DENSELBEN klicke das er wieder einklappt...

WIE GEHT DAS?
 
Zuletzt bearbeitet:
Diese Zeile:
Code:
d.getElementById(divid).style.display="inline";
ändern in das:
Code:
var obj = d.getElementById(divid);
 obj.style.display = obj.style.display == 'none' ? 'inline' : 'none';
 
HTML:
<script type="text/javascript">
<!--
function show(divid) {
d=document;

var obj = d.getElementById(divid);
 obj.style.display = obj.style.display == 'none' ? 'inline' : 'none';
}
//-->
</script>
 
ehm...
Jo das geht jez aber jez kann ich wieder so viele Links ausklappen wie ich will...
ICh will aber auch das wenn man einen ausklappt und dann einen ANDEREN anklickt das der eine wieder einklappt und der neue eben ausklappt... :)
 
HTML:
<script type="text/javascript">
<!--
function show(divid) {
d=document;

if (d.getElementById(divid).style.display == 'block')
   {
      d.getElementById(divid).style.display='none';
   }
   else
   {
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';


    d.getElementById(divid).style.display='block';
   }
}
//-->
</script>
 

Neue Beiträge

Zurück