# JQuery - Geschwisterelemente ausblenden...



## SonMiko (26. August 2010)

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 (26. August 2010)

Moin Mike,

nextAll() hilft dir da weiter


----------



## SonMiko (26. August 2010)

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 (26. August 2010)

SonMiko hat gesagt.:


> Eine Art toggle oder sowas?


 Jo, soetwas gibt es, 

toggle()


----------



## rd4eva (26. August 2010)

> 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 (26. August 2010)

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 (26. August 2010)

> 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 (26. August 2010)

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


----------



## SonMiko (26. August 2010)

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

Danke


----------

