bootstrap崩溃除了一个和一个当时

Question

我花了好几个小时试图找到解决方案，但我失败了...所以我在寻求帮助。

在jsfidlle我在底部添加了一张图片，只是为了展示它应该是什么样子。

当您点击“标题”时，新内容会打开折叠其他两个内容。在此期间，即使双击它关闭，也必须保持活跃状态​​。

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

https://jsfiddle.net/u7L65ofn/2/

ps：我评论了两个部分，这样他们就不会妨碍他们。

有谁知道如何解决这个问题？

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