siblings issue - close all open panels when 1 is opened
<p>IF i have this html:</p>

<pre><code>&lt;div class="main cat_info"&gt;
&lt;h2&gt;Question 1?&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
  &lt;h2&gt;question 2&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
  &lt;h2&gt;Question 3?&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and I open one question, if another question is opened it closes (which is what I want). But when I wrap h2 and .answer in divs, it doesnt't work. Like:</p>

<pre><code>&lt;div class="main cat_info"&gt;
  &lt;div class="holder"&gt;
&lt;h2&gt;Question 1?&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="holder"&gt;
  &lt;h2&gt;question 2&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
  &lt;div class="holder"&gt;
  &lt;h2&gt;Question 3?&lt;/h2&gt;
  &lt;div class="answer"&gt;
    &lt;p&gt;bla bla bla&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is the jquery:</p>

<pre><code>$(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');
    }
    });
});
</code></pre>

<p>I guess it's siblings problem. Help?</p>
