Javascript Einblenden Ausblenden
Auf/Zu klappenTutorials » JavaScript Tutorials » Auf/Zu klappen
Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 52653 mal gelesen
Auf/Zu klappen - Tutorial
Viele fragen sich jetzt bestimmt, was ich mit Aufklappen meine.Beispiel anschauen
Hier kommt nun der Code, dieser muss in den Head-Bereich deiner Datei, zwischen <head> und </head> ...
<script type="text/javascript"> function toggle(control){ var elem = document.getElementById(control); if(elem.style.display == "none"){ elem.style.display = "block"; }else{ elem.style.display = "none"; } }</script>
Innerhalb der Funktion toggle() wird ueberprueft, ob das HTML-Element, welches in der Variable elem definiert wurde, ueber das Attribut style="display: none"(Element ist ausgeblendet) verfuegt, sollte dies der Fall sein, wir dies geaendert in style="display: block"(Element wird eingeblendet). Wenn beim Aufruf der Funktion style="display: nicht auf none stehen sollte(Element ist als eingeblendet) , dann wird dies geaendert, so dass das Element wieder ausgeblendet ist.
So und nun zum Schluss der Code fuer das HTML-Element, in diesem Fall ein Div, funktioniert aber genauso gut mit anderen Block-Elementen oder Inline-Elementen...
Wichtig ist nur, dass das HTML-Element mit einer id bestueckt wurde, welche der Funktion toggle mitgeteilt wird.
<a href="javascript:toggle('test')"> x Zum aufklappen hier klicken.</a> <br /><div id="test" style="display: none">Dein Text hier</div>
Unser Div-Element hat hier die id="test", also lautet der Javascript Befehl im Link, zum Ausfuehren/Aufrufen der Funktion, javascript:toggle('test') ...
Wuerde unser Div-Element jetzt so aussehen:
<div id="gemuese" style="display: none">Dein Text hier</div>
Dann muesste der Link dazu wie folgt aussehen:
<a href="javascript:toggle('gemuese')"> x Zum aufklappen hier klicken.</a>
Sofern mehrere Texte ein/ausgeblendet werden sollen, in ein und der selben Datei, muss dies mit jeweils einer anderen ID geschehen, da eine ID immer nur einmal in einer HTML-Datei vergeben werden darf.
Beispiel:
<a href="javascript:toggle('test')"> x Zum aufklappen hier klicken. (1)</a> <br /><div id="test" style="display: none">Text Nummero Uno ...</div> <br /><br /> <a href="javascript:toggle('test1')"> x Zum aufklappen hier klicken. (2)</a> <br /><span id="test1" style="display: none">Text Nummer zwei kommt hier ...</span> <br /><br /> <a href="javascript:toggle('test2')"> x Zum aufklappen hier klicken. (3)</a> <br /><p id="test2" style="display: none">Und hier steht Text Nummer 3 ...</p> <a href="javascript:toggle('test4')"> x Zum aufklappen hier klicken. (4)</a> <br /><div id="test4" style="display: none">Text Nummer 4 kommt hier ...</div>
So das wars dann auch schon ...
Beispieldatei downloaden
Hinweis:Das Tutorial wurde am 09.04.2012 ueberarbeitet ...
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...