title: How to hide panels when one bootstrap is active?
body: <p>I am creating a bootstrap panel . It has 3 panels . panel 1 , panel 2 , panel 3 . This panel is working fine normally .</p>
  
  <p><strong>My logic :</strong></p>
  
  <ul>
  <li>When panel 1 click , it shows the content of panel 1  with both panel 2 , panel 3 should hide .</li>
  <li>When panel 2 click , it shows the content of panel 2 with both panel 1 , panel 3 should hide .</li>
  <li>When panel 3 click , it shows the content of panel 3 with both panel 1 , panel 2 should hide .</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/STXw3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/STXw3.png" alt="enter image description here"></a></p>
  
  <p>but i want to utilize the space also . That is the active panel should come first . so i can maintain the space also . ( All the active panel should come first position )</p>
  
  <p>This is my existing code :</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
            Panel #1&lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;
        panel 1 content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
            Panel #2 &lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          panel 2 content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
            Panel #3&lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          panel 3 content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script :</strong></p>
  
  <pre><code>$('.collapse').on('shown.bs.collapse', function(){
  $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
  }).on('hidden.bs.collapse', function(){
  $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
  });
  </code></pre>
  
  <p>Any suggestion how can i done this with bootstrap collapse panel ? </p>