jquery - パネルを折りたたむ-1つを開くが他を閉じる方法

Question

'close'のクラスを追加し、要素にスライドするこのjqueryコードがありますが、他のすべてのコードは、そのうちの1つが開かれたときに閉じます。そのため、クリックして1つを開くと、開いている他の1つを閉じてほしいのですが、できません。HTML：

<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を持っています：

$(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>

これを最初の関数に追加しようとしましたが、クリックすると、下にスライドしてから上にスライドします。

$('.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();
        }
    });
});​

フィドル

参考：toggle()そのように使用することは非推奨です