Twitter bootstrap 数据切换=“；崩塌”；具有多个触发器/引导

我有四个菜单，我使用了引导中的折叠功能，每个菜单都有自己的内容

有没有办法只显示所选按钮/菜单的内容并折叠/隐藏其他按钮/菜单的内容

多谢各位

<div class="row example-row example-thumbnails">
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="A - Standard Tip Profile" src="images/products/mm/metal-type/standard-metal-type.png" />
<div class="caption">
<h3>A - STANDARD TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-tungsten">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="H - Heat Treated Tapered Tip Profile" src="images/products/mm/metal-type/heat-metal-type.png" />
<div class="caption">
<h3>H - HEAT TREATED TAPERED TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-heat">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="B - Blunted Tip Profile" src="images/products/mm/metal-type/blunted-metal-type.png" />
<div class="caption">
<h3>B - BLUNTED TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-blunted">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="F - Extra Fine Tip Profile" src="images/products/mm/metal-type/extra-metal-type.png" />
<div class="caption">
<h3>F - EXTRA FINE TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-extra">Click here</button>
</div>
</div>
</div>
</div>

A-标准叶尖轮廓
点击这里
H-热处理锥形尖端轮廓
点击这里
B-钝尖轮廓
点击这里
F-超精细叶尖轮廓
点击这里

以及我的四个内容分区：

<div class="col-xs-12 collapse" id="order-online-tungsten">
content
</div>
<div class="col-xs-12 collapse" id="order-online-extra">
content
</div>
<div class="col-xs-12 collapse" id="order-online-blunted">
content
</div>
<div class="col-xs-12 collapse" id="order-online-heat">
content
</div>

内容
内容
内容
内容

使用jQuery，您可以非常轻松地实现这一点：

添加以下内容以折叠所有其他部分，并仅打开单击时选定的部分：

$('.example-thumbnails button').on('click', function() {
  $('.collapse').removeClass('in');
});

此单击操作将从可折叠部分中删除“in”类，这是使它们出现在示例中的触发器。如果我使用的选择器与放入.example thumbnails div的未来按钮冲突，则可以对其进行修改

这是一支笔，用来在工作中展示它：

---

使用jQuery，您可以非常轻松地实现这一点：

添加以下内容以折叠所有其他部分，并仅打开单击时选定的部分：

$('.example-thumbnails button').on('click', function() {
  $('.collapse').removeClass('in');
});

此单击操作将从可折叠部分中删除“in”类，这是使它们出现在示例中的触发器。如果我使用的选择器与放入.example thumbnails div的未来按钮冲突，则可以对其进行修改

这是一支笔，用来在工作中展示它：

---

没问题！很高兴我能帮忙！大家好，Mutual Designs，我试图在我的joomla网站上实现这一点，我创建了一个JS文件，并进行了调用，但出现了一个错误：

code

collapse in.JS:1 Uncaught SyntaxError:Unexpected token您在该JS文件的某个地方有一个

标记。大家好，在这里添加代码时出现了一个错误，使用了错误的代码标签，我在运行脚本时收到的消息是：Uncaught SyntaxError:Unexpected token谢谢您的时间，我必须查看您试图发布的代码以提供帮助。你的JS文件中有不属于那里的东西。尝试将其发布到pastebin.com或codepen.io。没问题！很高兴我能帮忙！大家好，Mutual Designs，我试图在我的joomla网站上实现这一点，我创建了一个JS文件，并进行了调用，但出现了一个错误：
code
collapse in.JS:1 Uncaught SyntaxError:Unexpected token您在该JS文件的某个地方有一个
标记。大家好，在这里添加代码时出现了一个错误，使用了错误的代码标签，我在运行脚本时收到的消息是：Uncaught SyntaxError:Unexpected token谢谢您的时间，我必须查看您试图发布的代码以提供帮助。你的JS文件中有不属于那里的东西。尝试将其发布到pastebin.com或codepen.io。