How to hide panels when one bootstrap is active?

Question

I am creating a bootstrap panel . It has 3 panels . panel 1 , panel 2 , panel 3 . This panel is working fine normally .

My logic :

• When panel 1 click , it shows the content of panel 1 with both panel 2 , panel 3 should hide .
• When panel 2 click , it shows the content of panel 2 with both panel 1 , panel 3 should hide .
• When panel 3 click , it shows the content of panel 3 with both panel 1 , panel 2 should hide .

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 )

This is my existing code :

HTML

<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Panel #1<span class="glyphicon glyphicon-chevron-up"></span>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
      panel 1 content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Panel #2 <span class="glyphicon glyphicon-chevron-up"></span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        panel 2 content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Panel #3<span class="glyphicon glyphicon-chevron-down"></span>
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        panel 3 content
      </div>
    </div>
  </div>
</div>
</div>

Script :

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

Any suggestion how can i done this with bootstrap collapse panel ?

Answer 1

the active panel should come first position

In order to move at the first position the active tab a solution in jQuery is:

$('#accordion').prepend($(this).closest('div.panel-default'));

While moving at the first position you can save the current position of the panel so when you click again on the panel (the only visible) all the panels can be shown and the current panel can be positioned at the right place:

$(this).closest('div.panel-default')
       .insertAfter($('div.container div.panel-default').eq(idx))

So, the snippet is:

$('.collapse').on('show.bs.collapse', function () {
  $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
  $(this).closest('div.panel-default').attr('idx', $(this).closest('div.panel-default').index());
  $('#accordion').prepend($(this).closest('div.panel-default'));
  $('div.container div.panel-default').not($(this).closest('div.panel-default')).hide();
}).on('hide.bs.collapse', function () {
  $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
});

$('#accordion a.accordion-toggle').on('click', function (e) {
  if ($('div.container div.panel-default:visible').not($(this).closest('div.panel-default')).length == 0) {
    var idx = $(this).closest('div.panel-default').attr('idx');
    $('div.container div.panel-default').show();
    $(this).closest('div.panel-default').insertAfter($('div.container div.panel-default').eq(idx))
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        Panel #1<span class="glyphicon glyphicon-chevron-up"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    panel 1 content
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        Panel #2 <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    panel 2 content
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        Panel #3<span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    panel 3 content
                </div>
            </div>
        </div>
    </div>
</div>