붕괴 패널 - 하나를 열고 닫는 방법

Question

클래스에 'close'클래스를 추가하고 요소에서 슬라이드하는이 jquery 코드가 있지만 그 중 하나가 열리면 다른 모든 개체를 닫으려고합니다. 따라서 내가 그 중 하나를 열기 위해 클릭하면 열려있는 다른 것들을 닫고 싶지만 그것을 할 수는 없습니다. HTML : 내가 처음 기능이 추가하지만, 그것을 클릭 바로 아래, 후 슬라이드 시도

$(document).ready(function() { 
$('.answer').hide(); 
$('.main h2').toggle(
    function() { 
     $(this).next('.answer').slideDown(); 
     $(this).addClass('close'); 

    }, 
    function() { 
     $(this).next('.answer').fadeOut(); 
     $(this).removeClass('close'); 
    } 
    ); // end toggle 
}); // end ready 
</script> 

:

<div class="main"> 
<h2>Question 1?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
    <h2>question 2</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
    <h2>Question 3?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
</div> 

내가이 jQuery를 가지고있다.

$('.main .answer').not(this).slideUp(); 

Answer 1

$(document).ready(function() { 
    $('.answer').hide(); 
    $('.cat_info h2').on('click', function() { 
     var state = $(this).next('.answer').is('.open'); 
     if (state) { 
      $(this).next('.answer').removeClass('open').fadeOut(); 
     }else{ 
      $(this).next('.answer').addClass('open').slideDown() 
        .siblings('.answer').removeClass('open').slideUp(); 
     } 
    }); 
});​ 

FIDDLE

는 참고 : toggle() 그런 식으로 난 당신이 의도적으로 여기에 자신의 솔루션을 롤하려는 경우 확실하지 않다 deprecated