Script um Inhalt aufzuklappen

[webdoktor]

Hallo zusammen

Ich suche ein einfaches Script wo ich z.B. 3 Zeilen habe
und vor den Zeilen ein Plus-Zeichen wo dann aufklappt und dort
dann weiterer Inhalt darunter ist also so:

+ Beispiel 1
+ Beispiel 2
+ Beispiel 3

Wenn ich jetzt auf das + Beispiel 1 klicke soll einfach unten weiterer Text
kommen und die anderen Beispiele nach unten schieben.

Kennt jemand ein solches Script? Freue mich über jeden Tipp!

Gruss Marco

 

[Heiko R]

Ich habs grad nicht arat, aber...
Du setzt das, was aufklappen soll in einen container dem du zu beginn die style-eigenschaften "display:none;visibility:hidden;" gibst.
Dann in dem Link mit onClick eine JS-Funktion aufrufen, die die Eigenschaften von "unsichtbar" in "sichtbar" verändert.

 

[KarstenS]

Sowas nennt sich Accordion effekt. Hier gibts eine Übersicht über verschiedene Variationen: http://tutorialblog.org/10-javascript-accordion-scripts/


Gruß
Karsten

 

[Daniel Steffen novinet]

Tach, ganz einfach, du machst als erstes ne js-funktion, etwa so:

CODE
function toggle(id)
{
if(document.getElementById(id).style.display=="block")
{
document.getElementById(id).style.display="none");
} else {
document.getElementById(id).style.display="block");
}
}



So, diese Funktion prüft, ob ein Element jetzt aktiv ist oder nicht, d.h. sichtbar oder nicht.

So, jetzt kommen wir zum Html:


CODE
<a href="javascript:void(0)" onclick="toggle(div_1)">Menu 1</a>
<br />
<div id="div_1" style="display:none">
Versteckter Inhalt 1
</div>
<a href="javascript:void(0)" onclick="toggle(div_2)">Menu 2</a>
<br />
<div id="div_2" style="display:none">
Versteckter Inhalt 2
</div>
<a href="javascript:void(0)" onclick="toggle(div_3)">Menu 3</a>
<br />
<div id="div_3" style="display:none">
Versteckter Inhalt 3
</div>



So, das war die Quick and Dirty-Methode... hoffe trotzdem dass es dir weiterhilft.

Gruß, Daniel (der, der auch mal helfen wollte)