Padding bottom beim sliden?

[Fr3ddy]

Hi,
ich habe eine akkordeon funktion:

$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
    var trig = $(this);
    if ( trig.hasClass('trigger_active') ) {
        trig.next('.toggle_container').slideToggle('slow');
        trig.removeClass('trigger_active');
    } else {
        $('.trigger_active').next('.toggle_container').slideToggle('slow');
        $('.trigger_active').removeClass('trigger_active');
        trig.next('.toggle_container').slideToggle('slow');
        trig.addClass('trigger_active');
    };
    return false;
});

Nun weis ich aber nicht weiter, ich möchte das, wenn das akkordeon aufgeht, das div mit der klasse "group" ein padding bottom von der höhe des divs "toggle_container'" bekommt und beim zugehen, dass es dann weider verschwindet.

Es soll quasi so aussehen als ob der untere inhaltsbereich beim aufgehenden akkordeon nach untengeschoben wird.

LG

 

[thecain]

Warum nicht einfach die Funktionen benutzen die JQuery eh schon anbietet? http://jqueryui.com/accordion/

 

[Fr3ddy]

Weil meine html struktur leider kein herkömliches akkordeon ist

 

[scbawik]

Wo ist das Element 'group'? Ist bei deinem Snippet nicht ersichtlich.
Ich vermute...

$(this).parent('.group').css('padding-bottom',trig.next('.toggle_container').height());

 

[Fr3ddy]

Ich poste mal meine html struktur:

<div class="group">
<div class="item1">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item2">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item3">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item4">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>
<div class="group">
<div class="item5">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item6">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item7">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item8">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>

 

[Tronjer]

Bin zu müde, um mich da jetzt hineinzudenken, aber ich hatte neulich mal ein Akkordeon in 3 Zeilen geschrieben. Vielleicht kannst du das ja als Grundlage nehmen.
http://jsfiddle.net/4MpqZ/14/

 

[Fr3ddy]

Danke aber das problem ist nicht das akkordeon, das funktioniert, nur das padding-bottom nicht.