mehrere DIVs ein-/ausklappen (aber soll max. eins ausgeklappt sein...)

[STVN!]

Guten Tag.

Ich möchte, dass beim Klicken auf einen Link ein DIV angezeigt bzw nicht mehr angezeigt wird. Das klappt soweit ganz gut, allerdings möchte ich, dass immer nur eins der DIVs angezeigt wird. Ich weiß aber absolut nicht, wie ich realisieren kann. Kann mir jemand helfen, bitte? In nützlicher Link würde mir schon sehr helfen...

Hier mal mein Code.

<div>
	<a href="#" style="display:none;" onclick="toggle('layer1')">KLICK! 1</a> 
	<a href="#" style="display:none;" onclick="toggle('layer2')">KLICK! 2</a> 
	<a href="#" style="display:none;" onclick="toggle('layer3')">KLICK! 3</a> 
</div>
<div id="layer1">AUSGEKLAPPT! 1</div>
<div id="layer2">AUSGEKLAPPT! 2</div>
<div id="layer3">AUSGEKLAPPT! 3</div>

<script type="text/javascript">
	function toggle(id){

	 var img = 'img_' + id;
	 if(document.getElementById(id).style.display == 'block') {
	  document.getElementById(id).style.display = 'none';
	 } else {
	  document.getElementById(id).style.display = 'block';
	 }

	}
</script>

Gruß.
STVN!

[MichaG]

Vor dem Einblenden des entsprechenden Div-Elements alle erst einmal ausblenden. Am einfachsten ist das über eine entsprechende Klasse. Wie man sich die Node-List für eine bestimmte Klasse mit Plain Javascript holt kann ich allerdings spontan nicht sagen - dazu bin ich leider zu "frameworkverwöhnt". Evtl. wäre das generell auch für dich interessant: jQuery oder MooTools sind angenehmen zu benutzen, weit verbreitet und schlank.

[pidd]

ich glaube was du suchst nennt sich Akkordion.

Als weitern tipp,.. schau dir mal jQuery an falls dir das noch kein Begriff ist. Das erleichtert dir enorm die Arbeit

gruß
pidd

[fiu]

das jquery-accordion ist primär für menüs gedacht, komplette content-bereich damit zu realisieren sollte zwar möglich sein aber ... es ist auch möglich mit einem Vorschlaghammer auf Fliegen zu hauen

Der Tipp vor dem einblenden erst alle auszublenden scheint mir eine passable Lösung zu sein.

alternativ kenne ich noch eine reine css-variante in der mit einem hohen margin das div ausgeblendet wird und per hover eingeblendet wird .. ob sich das auch mit einem Klick realisieren lässt müsste man ausprobieren.