ブートストラップアコーディオンのデフォルトデフォルトの縮退とflipkartのように動作

Question

私は詳細検索のためにブートストラップaccrodionを使用しています。私はアコーデオンのいくつかの変更が必要です。

すべてのアコーディオン要素を初期にしたいです。

アコーディオン要素をクリックすると、現在の要素が閉じられます。

もう一度要素をクリックすると要素が開き残りの要素は閉じられます。これがブートストラップのデフォルト機能です。しかし、私が開いている要素をクリックすると、残りの要素は閉じたような効果を持つべきではありません。

私が正確に欲しいのは、どのアイテムがそのアイテムをクリックしただけで同じアイテムを開いたり閉じたりしたかです。残りの要素には影響しません。

ちょうどflipkart絞り込み検索のように、左側のパネルで利用できます。リンクを表示します。

https://www.flipkart.com/mobiles/samsung~brand/pr?sid=tyy,4io&otracker=nmenu_sub_Electronics_0_Samsung

Answer 1

accordion documentationあなたが設定することができますによると：

• 各パネル崩壊のためにfalseにトグル
• は/各非表示に各パネル崩壊
• を表示アコーデオンイベントを表示すると、クラスを切り替えることができます

例：

$('.panel-collapse').collapse({ 
 
    toggle: false 
 
}).collapse('show'); 
 

 
$('#accordion').on('hide.bs.collapse show.bs.collapse', function (e) { 
 
     $(e.target).prev('div').find('.glyphicon').toggleClass('glyphicon-menu-down glyphicon-menu-up'); 
 
})

<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="row"> 
 
     <div class="col-sm-3 col-md-3"> 
 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading" role="tab" id="headingOne"> 
 
         <h4 class="panel-title"> 
 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
           Collapsible Group Item #1 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> 
 
          </a> 
 
         </h4> 
 
        </div> 
 
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
         <div class="panel-body"> 
 
          Anim pariatur cliche reprehenderit, enim eiusmod high life...... 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading" role="tab" id="headingTwo"> 
 
         <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
           Collapsible Group Item #2 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> 
 
          </a> 
 
         </h4> 
 
        </div> 
 
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
         <div class="panel-body"> 
 
          Anim pariatur cliche reprehenderit, ..... 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading" role="tab" id="headingThree"> 
 
         <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
           Collapsible Group Item #3 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> 
 
          </a> 
 
         </h4> 
 
        </div> 
 
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
         <div class="panel-body"> 
 
          Anim pariatur cliche reprehenderit, ..... 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>