Wie blenden Sie Panels aus, wenn ein Bootstrap aktiv ist?

Question

Ich erstelle ein Bootstrap-Panel. Es hat 3 Panels. Tafel 1, Tafel 2, Tafel 3. Dieses Panel funktioniert normal.

Meine Logik:

• Wenn Panel 1 Klick, den Inhalt der Platte 1 mit beiden Panel 2, Panel 3 sollte verbergen.
• Wenn Panel 2 klickt, zeigt es den Inhalt von Panel 2 mit beiden Panel 1, Panel 3 sollte ausblenden.
• Wenn Panel 3 klicken, zeigt es den Inhalt von Panel 3 mit beiden Panel 1, Panel 2 sollte ausblenden.

, aber ich möchte auch den Raum nutzen. Das ist das aktive Panel sollte zuerst kommen. so kann ich den Raum auch beibehalten. (Alle aktiven Panel erste Position kommen sollte)

Dies ist meine vorhandenen 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"); 
}); 

Jeder Vorschlag, wie kann ich getan dies mit Bootstrap-Kollaps Panel?

Answer 1

sollten die aktiven Panel erste Position kommen

Um die aktiven Registerkarte eine Lösung in jQuery ist in der ersten Position zu bewegen: Sie

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

Während der Bewegung an der ersten Position kann die aktuelle Position des Panels speichern, wenn Sie also erneut auf das Panel klicken (das einzige sichtbare), können alle Panels angezeigt werden und das aktuelle Panel kann an der richtigen Stelle positioniert werden:

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

So, das Snippet ist:

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