Javascript 如何在bootstrap中组合药片、折叠和标签？

我正在尝试创建一些药丸，点击后会显示并在一些内容之间切换

这个很好用

我想在再次单击活动药丸时隐藏内容。这样我就不能上班了

这是我当前的代码，您可以在这里尝试：

当您单击其中一个药丸时，它将显示内容，当您单击另一个药丸时，它将在内容（如选项卡）之间切换。但是，当点击活动药丸时，我如何隐藏内容

<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>    

药丸1
一些内容

药丸2
药丸2的一些内容

药丸3
药丸3的一些内容

---

谢谢。

您可以添加以下jQuery代码：

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

---

这不需要javascript，只需将所有对选项卡的引用更改为折叠即可。标签是为了一个始终显示，然而，折叠是为了。。。崩溃

变化包括：

• 所有的

  data toggle=“tab”

  现在都是

  data toggle=“collapse”

• 您的所有

  class=“选项卡窗格淡入淡出”

  现在都是

  class=“折叠淡入淡出”

• 将三个选项卡内容包装在一个面板中。这是由于引导中的数据父级存在错误。详情可随时查询
• 删除了

  data parent=“#accordion”

  ，然后将

  data parent=“#collapse”

  添加到所有三种药片中

---

粘贴的代码不在链接的JSFIDLE中。你保存了吗？很抱歉。现在应该可以了。我刚刚意识到，当我点击Pill1时，它会显示内容，如果我再次点击Pill1，它会隐藏内容。到现在为止，一直都还不错。但如果我再次单击Pill1，它不会再次显示内容。是否可以使其切换内容？thanks@ThomasD没问题，很乐意帮忙！