Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 6668 mal gelesen
Javascript Einblenden Ausblenden
Auf/Zu klappenTutorials » JavaScript Tutorials » Auf/Zu klappen
Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 6668 mal gelesen
Auf/Zu klappen - Tutorial
Viele fragen sich jetzt bestimmt, was ich mit Aufklappen meine.Aber dies ist einfach zu verstehen wenn ich es euch zeige
Beispiel anschauen
So ich glaube so gehts besser =)
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>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. Ich hoffe ihr habt es verstanden
Beispieldatei downloaden
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 ...
