Loading...   Upload Image

Auf/Zu klappenTutorials » JavaScript Tutorials » Auf/Zu klappen

Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 43096 mal gelesen

Kategorie: JavaScript
Bewertung:
19x bewertet
Schwierigkeit: einfach
Kommentare: [ 6 ]

Tag - Schlagwort Javascript Tag - Schlagwort Einblenden Tag - Schlagwort Ausblenden

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 ...


Affiliates:   Chibi Graphics  •   Gallery Yuri  •   Blue-Graphics  •   Colorful Gfx  •   The Seduction  •   Design Grafixx  •   Pat DG  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider