✔ toggle div um Funktionalität alle mit einem Klick ein-/ausblenden erweitern

[Toggenburger]

Hallo allerseits,

mit dem Script wird ein content div über einen click auf das header div ein- und ausgeblendet. Funktioniert wunderbar. Auch bei mehreren header/divs.

Wie kann ich die Funktionalität dahingehend erweitern, dass mit einem click auf ein zusätzliches div alle (eingeblendeten) divs ausgeblendet werden und umgekehrt?

<script type='text/javascript'>
$(window).load(function(){
    $('.header').click(function() {
        if ($(this).next().is(':visible')) $(this).addClass('active').next('.content').slideUp();
        else $(this).removeClass('active').next('.content').slideDown();
});
});
</script>

<div class="container">
    <div class="header">Inhalt1</div>
    <div class="content"><p>1: Lorem ipsum dolor sit amet</p></div>
</div>

<div class="container">
    <div class="header">Inhalt 2</div>
    <div class="content"><p>2: Lorem ipsum dolor sit amet</p></div>
</div>

Das Styling ist mal unwichtig.

Danke.

 

[CPoly]

Ich habe deinen Code mal etwas mehr "jQuery style" gemacht: https://tinker.io/14c4e

 

[Toggenburger]

super danke.
Wenn der zweite Eintrag offen ist, ist ein springen der letzten Zeile zu erkennen, woher kommt das?

 

[CPoly]

Das Problem hat dein Code ebenfalls. Das ist ein bekanntes jQuery Problem beim Animieren der Höhe oder Breite, wenn zusätzlich padding/margin im Spiel ist (die <p> Elemente haben in diesem Fall einen margin).

Such mal nach "jquery slide jump" o.ä.
http://groups.google.com/group/jquery-en/browse_thread/thread/a9f3fbb7d4c036f1/de2009dcbe51dd91
Beispiel: http://stackoverflow.com/questions/2760269/jquery-slider-jump-to-height-glitch

 

[Toggenburger]

ok, danke nochmals, ich kann auf jeden Fall damit weiter arbeiten.
Grüße