jQuery – 4 – Flipflop / Toggle

Ist zwar nur ein klitzekleines Script .. aber ich brauch es öfter mal.

Ihr kennt das .. manche Bereiche einer Website sollen nur dargestellt werden wenn der User sie wirklich benötigt bzw. wenn der User einen bestimmten Bereich klickt.

Dafür eignet sich unter jQuery der Toggle Befehl sehr gut. Er ersetzt z.b. auf Klick einen Bereich einer Website komplett durch ein einen anderen. Man schlägt also zwei Fliegen mit einer Klappe: Verschwinden und Erscheinen 🙂

Mein jQuery Toggle Beispiel

jQuery Code

$("a.bbb").click(         
    function() {
      $("div.news").toggle("fast");       
    }
    );

Wenn auf die Klasse “bbb” geklickt wird soll der Bereich “div.news” getoggelt werden. Die Geschwindigkeit lässt sich ebenfalls beeinflussen: “slow”, “normal” oder “fast” oder einfach die Millisekunden angeben (z.B. 1000).

HTML Code

<body>
<div class="news">
    <a href="javascript:function()" class="bbb"><h3>Ich habe die AGBs gelesen</h3></a> 
</div>    
<div class="news" style="display:none;">
   <h3><a href="http://www.getmad.de">weiter zur Anmeldung</a></h3>
</div>
</body>

Ich habe zwei “div.news” Bereiche angelegt .. einer ist sichtbar und der zweite wird unsichtbar gemacht mit dem Befehl “display:none”. Wird nun das Javascript aufgerufen wird der Style Bereich der beiden DIVs gewechselt und ich erhalte meinen Effekt.

Hier nochmal mein jQuery Toggle Beispiel (seht euch am besten den Quelltext an)

Leave a Reply

Your email address will not be published. Required fields are marked *