JavaScript - Flip-Container - Einklappen/Ausklappen von Inhalten)

Durch einen Klick auf einen Link, Bild, Button, ... können vordefinierte Inhalte aus- und wieder eingeklappt werden. Das Script, ein spzieller Aufrufcode und ein <div>-Container arbeiten hier zusammen.


Demonstration:

Weitere Inhalte auf/einklappen



Einbaucode (Hauptscript):





Erklärungen zum Hauptcode:

Mit diesem Script kann der Nutzer eigentlich kaum etwas anfangen. Es muss nicht weiter konfiguriert werden und steuert lediglich die Klappfunktion.


Der eigentliche Einbau:


<a href="javascript:toggle('ramnipshphelpfliparea')">Weitere Inhalte auf/einklappen</a>

<div id="ramnipshphelpfliparea" style="DISPLAY: none">
Dies ist ein Demo-Text.
Er demonstriert nicht, keine Angst.
Nachts ist es übrigens kälter als blau.
<img src="http://www..../bild.jpg">
Bilder kann man auch einfügen... klaro.
</div>


Erklärungen zum Einbaucode:

Der gewünschte Bereich muss in einem <div>-Container definiert werden (<div> ... Inhalte ... </div>).
Welche Inhalte man einpflegt, ist jedem selbst überlassen. Von reinem Text oder Bildern bis hin zu ganzen HTML-Bereichen ist alles möglich.
Wichtig ist, dass der Aufrufcode die selbe Namenszuweisung wie die ID des Containers erhält.
Mehr ist es an der Stelle nicht. Übrigens ist es egal, ob der Aufrufecode über dem Containter steht, oder daneben (z.B. in Tabellen) oder darunter.


Der Aufrufcode als Button:


<input type="button" onClick="javascript:toggle('ramnipshphelpfliparea')" value="Weitere Inhalte auf/einklappen">


Erklärungen:

Wie Buttons funktionieren, erklärt der Bereich "Specials" auf der Hauptseite. Dort können also noch Design und Aussehen angepasst werden.


FAQ: Kann man auch mehrere "Flip-Container" auf einer HP einbauen?


<a href="javascript:toggle('ramnipshphelpfliparea')">Weitere Inhalte auf/einklappen</a>
<div id="ramnipshphelpfliparea" style="DISPLAY: none">
... Inhalte ...
</div>

<a href="javascript:toggle('ramnipshphelpfliparea2')">Weitere Inhalte auf/einklappen</a>
<div id="ramnipshphelpfliparea2" style="DISPLAY: none">
... Inhalte ...
</div>

<a href="javascript:toggle('ramnipshphelpfliparea3')">Weitere Inhalte auf/einklappen</a>
<div id="ramnipshphelpfliparea3" style="DISPLAY: none">
... Inhalte ...
</div>


Selbstverständlich: Pro Aufrufecode und Div-Container muss lediglich jeweils ein eigener, eindeutiger Name zugewiesen werden.
Hier im Beispiel sind dies insgesamt drei Container mit jeweils drei eigenen Namen ramnipshphelpfliparea, ramnipshphelpfliparea2 und ramnipshphelpfliparea3.