jquery - 兄弟の問題-1が開かれると、開いているすべてのパネルを閉じます

Question

私がこのhtmlを持っている場合：

<div class="main cat_info">
<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>

1つの質問を開き、別の質問を開くと閉じます（これが私が望むものです）。しかし、h2と.answerをdivでラップすると、機能しません。好き：

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

これはjqueryです：

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

兄弟の問題だと思います。ヘルプ？

Answer 1

そのマークアップを使用すると、おそらく次のようになります。

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

フィドル