Html 引导崩溃，但一次只有一个

我花了几个小时试图找到解决办法，但我失败了。。。所以我请求帮助

在jsfidlle中，我在底部添加了一张图片，只是为了展示它的外观

当您单击“标题”时，将打开一个新内容并折叠其他两个内容。同时，即使双击关闭，也必须保持活动状态

这就是我到目前为止所做的：

附言：我评论了两个部分，这样他们就不会碍事了

有人知道如何解决这个问题吗

<div class='ribon container' id='ribon_1'>
<div class="row bg-gray">
    <div class="col-sm-3">
        <a id="rb-coll-1" class="txt-col-black" href="#rib-collapse-1"><h4><strong>Komentari</strong></h4></a>
    </div>
    <div class="col-sm-3">
        <a id="rb-coll-2" class="txt-col-black" href="#rib-collapse-2"><h4><strong>Najcitanije</strong></h4></a>
    </div>
    <div class="col-sm-3">
        <a id="rb-coll-3" class="txt-col-black" href="#rib-colapse-3"><h4><strong>Najnovije</strong></h4></a>
    </div>
</div>
<div id="rib-collapse-1" class="row bg-home txt-col-white rib-collapse col-sm-12">
        <div class="col-sm-3">
            <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare. Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
        </div>
        <div class="col-sm-3">
            <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare. Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
        </div>
        <div class="col-sm-3">
            <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare. Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
        </div>
</div>
<div id="rib-collapse-2" class="row bg-home txt-col-white rib-collapse col-sm-12">
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
</div>
<div id="rib-collapse-3" class="row bg-home txt-col-white rib-collapse col-sm-12">
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
    <div class="col-sm-3">
      <p>Mauris porta ipsum velit, et dignissim turpis lacinia ut. Vivamus ut nisi eu libero dapibus ornare.</p>
    </div>
</div>

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷。Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷。Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷。Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

Mauris porta ipsum velit，et Dignessim turpis lacinia ut。维瓦姆斯和尼西欧盟自由女神奥纳雷

---

为什么不使用Bootstrap本身提供的

Accordion

，而不是为可折叠项编写新的css和js？我一直在寻找解决方案（不过，我对Bootstrap是新手）。始终打开一个，同时只打开一个。accordion不能解决这个问题。为什么不使用Bootstrap本身提供的

accordion

，而不是为可折叠项编写新的css和js？我一直在寻找解决方案（尽管我对Bootstrap不熟悉）。始终打开一个，同时只打开一个。手风琴不能解决这个问题。