Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 8075 mal gelesen
Javascript Einblenden Ausblenden
Auf/Zu klappenTutorials » JavaScript Tutorials » Auf/Zu klappen
Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 8075 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 ...
Druckbare Version anzeigen
Permalink
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 ...
