Loading...   Upload Image

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

Verfasst von DJaneMauzi am 03.06.2009 - wurde schon 45452 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> ...



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.


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:


Dann muesste der Link dazu wie folgt aussehen:


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:
 x Zum aufklappen hier klicken. (1)



x Zum aufklappen hier klicken. (2)


x Zum aufklappen hier klicken. (3)
x Zum aufklappen hier klicken. (4)


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