25
Jun

jQuery für Anfänger - Tag 3

Geschrieben von: chris

Heute möchte ich euch einen weiteren Effekt versuchen zu erklären, unzwar den Accordion Effekt. Wir werden mit dem div und dem h1 Tag arbeiten. Arbeiten werden wir mit slideToggle und slideUp um den gewünschten Effekt zu erhalten. Vorraussetzung ist natürlich, dass wir unsere jQuery Libary in unseren <head> Bereich includiert haben. Die aktuelle Version von jQuery könnt Ihr euch auf der offiziellen Webseite herunterladenAlso fangen wir an. Als erster schreiben wir unseren kleinen aber feinen HTML Code.

<div class="demo-show2">
<h3>Title 1</h3>
<div>Lorem...</div>
<h3>Title 2</h3>
<div>Ipsum...</div>
<h3>Title 3</h3>
<div>Dolor...</div>
</div>

Nun müssen wir sagen, verstecke alle <div> Elemente, wenn wir ein <h3> Tag anklicken, slide das darunter liegende <div> aus. Wenn wir das <h3> Tag wiederholt anklicken, fahre das darunter liegende <div> wieder ein. Klicken wir ein anderes <h3> Tag an, so fahre das aktuell ausgefahrene <div> ein und das neu angeklickte <div> wieder aus. Ich hoffe das war verständlich erklärt. Um das ganze besser zu verstehen ist am ende des Artikels ein Beispiel angefügt. Fangen wir nun mit unserem kleinen Script Code an. Wir sagen also zu allererst, verstecke all unsere <div> Elemente.

$(document).ready(function() {
$('div.demo-show2> div').hide();
});

Nun schreiben wir den Code für unsere <h3> Tags. Wenn <h3> geklickt, leite eine Funktion ein.

$(document).ready(function() {
// ...
$('div.demo-show2> h3').click(function() {
// ...
});
});

Zum schluss müssen wir nun noch sagen, wenn ein <h3> geklickt, verstecke alle anderen <div> Elemente. Wir schreiben also folgendes.

$(document).ready(function() {
$('div.demo-show2> div').hide();
$('div.demo-show2> h3').click(function() {
$(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
});

jQuery gibt uns drei Varianten, slow, middle und fast. Natürlich können wir diese auch wieder durch Sekunden ersetzen. Hierzu schreiben wir einfach statt fast unsere gewünschten Sekunden in Millisekunden. Also z.B $(this).next('div').slideToggle('4000'), dass <div> fährt nun innerhalb von vier Sekunden aus.

Demo

$(document).ready(function() { $('div.demo-show2> div').hide(); $('div.demo-show2> h3').click(function() { $(this).next('div').slideToggle('fast') .siblings('div:visible').slideUp('fast'); }); });

Unser erster Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Unser zweiter Titel

Unser dritter Titel

Das war es auch schon. Viel Spaß, über Feedback und Kommentare würde ich mich sehr freuen :) Ihr könnt nun natürlich noch eure h3 Tags sowie div Elemente über eure CSS Datei anpassen.

Kommentare (0)

Kommentar schreiben

jQuery für Anfänger - Tag 3

Demo

Unser erster Titel

Unser zweiter Titel

Unser dritter Titel

Joomla Templates

Folge uns auf Twitter!

PSD/HTML-Template

Webspell Templates

test