JQuery - Geschwisterelemente ausblenden...

[SonMiko]

Hallo zusammen,

mal wieder plagt mich ein wahrscheinlich kleines JQuery Problem.
Es sieht folgendermaßen aus:
Auf selber Ebene befinden sich DIVs, welche ich ausblenden möchte.
Die Struktur sieht so aus:

<div class="space"><div class="head">Ueberschrift</div></div>
<div class="space"><div class="content">INHALT</div></div>
<div class="space"><div class="content">INHALT</div></div>
<div class="space"><div class="content">INHALT</div></div>
<div class="space"><div class="content">INHALT</div></div>
<div class="space"><div class="content">INHALT</div></div>

Ich möchte nun mit einem Klick auf die Klasse head, alle (es könnten auch mehr als diese 5 sein) Divs darunter verschwinden lassen - also auch die space divs dazwischen.

Wie stelle ichs am besten an?

Mein Ansatz:

$(this).parent(".space").next(".space").hide(1500);

Funktioniert, wirkt sich aber leider nur auf das nächste Element aus - es sollen aber alle angesprochen werden (von dem ausgehenden natürlich abgesehen)

Liebe Grüße und vielen Dank,

Mike

 

[Sven Mintel]

Moin Mike,

nextAll() hilft dir da weiter

 

[SonMiko]

Hi Sven,

super klasse danke dir - genau was ich gesucht habe.
Angenommen ich möchte nun mit einem weiteren Click auf das Element, dass alle besagten Elemente wieder eingeblendet werden - gibts dafür auch eine leichte Lösung? Eine Art toggle oder sowas?
Vielleicht kann ich auch rückfragen ob die besagten Elemente ein oder ausgeblendet sind und dementsprechend die Gegenfunktion hide oder show durchlaufen lassen?

Liebe Grüße,

Mike

 

[Sven Mintel]

Eine Art toggle oder sowas?

Jo, soetwas gibt es,

toggle()

 

[rd4eva]

Vielleicht kann ich auch rückfragen ob die besagten Elemente ein oder ausgeblendet sind und dementsprechend die Gegenfunktion hide oder show durchlaufen lassen?

Das geht aber auch:

var a = $(this).parent().nextAll();
    $.each(a,function(index, Element){
        if($(Element).is(':hidden')){
            $(Element).show();
        }else{
            $(Element).hide();
        }
    });

 

[Sven Mintel]

Das brauch man garnicht, diese Fallunterscheidung, ob das Element sichtbar ist oder nicht, liefert toggle() von Hause aus(sofern es nicht 2 Funktionen als Parameter übergeben bekommt)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="space"><div class="head">Ueberschrift</div></div>
<div class="space"><div class="content">INHALT1</div></div>
<div class="space" style="display:none"><div class="content">INHALT2</div></div>
<div class="space"><div class="content">INHALT3</div></div>
<div class="space" style="display:none"><div class="content">INHALT4</div></div>
<div class="space"><div class="content">INHALT5</div></div>  

<script type="text/javascript">
<!--
$('div.head').parent(".space").click(function(){$(this).nextAll(".space").toggle(1500);});
//-->
</script>

 

[rd4eva]

Das brauch man garnicht, diese Fallunterscheidung, ob das Element sichtbar ist oder nicht, liefert toggle() von Hause aus(sofern es nicht 2 Funktionen als Parameter übergeben bekommt)

Weiss ich doch Sven. War mehr ein Spässle als eine sinnvolle Alternative. Aber wer weiss vielleicht schreibt er ja gern und viel

 

[Sven Mintel]

Naja, deine Variante bietet schliesslich auch gleich den Ansatz für weitere Effekte als hide() und show(), falls erwünscht

 

[SonMiko]

Danke euch beiden:
Zum einen weiss ich nun dass ich den Animationszustand abfragen kann und mit toggle zwischen Funktionen umschalten kann...
Genial!

Danke