Question

I’m using this to expand or collapse some div

    $("h3.trigger").click(function(){
    $(this).toggleClass("active").next().fadeToggle(500,"swing");
    return false;
});

on this html code

    <div class="foo">
    <h3 class="trigger active">Test 1</h3>
    <div class="block" style="display:block">
        <p>Lorem ipsum dolor </p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 2</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 3</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

and everything works fine 😉

But I would like to be able to collapse all div opened except the one opened by the h3 click !

Thanks for your help…

Chris

Answer 1

DEMO

$('.trigger').click(function() {
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});

This will allow you to even hide an opened one if you click it again!
A smallest accordion script using TERNARY OPERATORS.

If you need help in understanding I can comment my code.

---

Here is the code with your .active :

demo

$('.trigger').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});