How make accordeon using siblings

Question

I have accordeon and some jquery script

    $(function () {
        $('.step-content').slideToggle(0);
        $('.step-title').click(function () {
            $(this).next('.step-content').slideToggle(100);
            $(this).children('.toggle-btn-down').toggleClass('toggle-btn-up');
        });
    });

i want to fold not active items

this is my example:

http://jsfiddle.net/spJWy/

Answer 1

You can use a combination of slideToggle, hasClass, toggleClass, not and hide to match all other elements and hide them accordingly.

Code:

 $(function () {
     $('.step-content').slideToggle(0);
     $('.step-title').click(function () {
         var $stepContent=$(this).children('.step-content');
         var $stepIcon=$(this).children('.toggle-icon');
         $stepContent.slideToggle(100);
         if ($stepIcon.hasClass('toggle-btn-down')){
             $('.step-content').not($stepContent).hide(100)
             $('.toggle-icon').not($stepIcon).addClass('toggle-btn-down').removeClass('toggle-btn-up');
         }
         $stepIcon.toggleClass('toggle-btn-up toggle-btn-down');
     });
 });

Demo: http://jsfiddle.net/RyXp2/