ピル、コラプス、タブをブートストラップに組み合わせるにはどうすればいいですか？

Question

私はいくつかの丸薬を作成しようとしています。これをクリックすると、いくつかの内容が表示され、切り替わります。

これは問題なく動作します。

もう一度アクティブな丸薬をクリックすると、内容を隠したいと思います。これは私が働くことができない。

これは、あなたがこのフィドルで試すことができます私の現在のコードです：https://jsfiddle.net/9phcsmwa/1/

あなた、それはコンテンツを表示する錠剤のいずれかをクリックして、あなたは別の錠剤をクリックしたときには、タブのようなコンテンツを切り替えます。しかし、アクティブ錠剤をクリックすると、どのようにコンテンツを隠すことができますか？

<div id="accordion"> 
    <div data-parent="#accordion" href=""> 
     <ul id="tabs" class="nav nav-pills" data-toggle="collapse" data-tabs="tabs"> 
      <li><a data-toggle="tab" href="#Pill1" class="btn btn-s-md btn-white m-b">Pill1</a></li> 
      <li><a data-toggle="tab" href="#Pill2" class="btn btn-s-md btn-white m-b">Pill2</a></li> 
      <li><a data-toggle="tab" href="#Pill3" class="btn btn-s-md btn-white m-b">Pill2</a></li> 
     </ul> 
    </div> 
</div> 

<div id="collapse" class="panel-collapse collapse in"> 
    <div class="tab-content"> 
     <div id="Pill1" class="tab-pane fade"> 
      <h3>Pill 1</h3> 
      <p>Some content.</p> 
     </div> 
     <div id="Pill2" class="tab-pane fade"> 
      <h3>Pill 2</h3> 
      <p>Some content for Pill 2.</p> 
     </div> 
     <div id="Pill3" class="tab-pane fade"> 
      <h3>Pill 3</h3> 
      <p>Some content for Pill 3.</p> 
     </div> 
    </div> 
</div>  

ありがとうございます。

Answer 1

、あなただけ崩壊するタブに、あなたのすべての参照を変更する必要があります。タブは常に1つ表示されることを意図していますが、崩壊して崩壊することはありません！

Here is you JSFiddle Updated

変更点は以下のとおりです。

• あなたdata-toggle="tab"のすべてが今data-toggle="collapse"です。
• class="tab-pane fade"はすべてclass="collapse fade"です。
• 3つのタブの内容をパネルにラップしました。これはBootstrapにdata-parentのバグがあるためです。詳細はfound hereです。
• data-parent="#accordion"を削除してから、あなたのピル3つすべてにdata-parent="#collapse"を追加しました。

Answer 2

あなたはこのjQueryのコードを追加することができます：あなたはこのためにJavaScriptを必要としない

$(document).ready(function() { 
    $('#accordion [data-toggle="tab"]').click(function() { 
     var $targetTabContent = $($(this).attr('href')); 
     if ($targetTabContent.hasClass('active')) { 
      $targetTabContent.removeClass('active'); 
     }  
    }); 
}); 

Updated JSFiddle