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