javascript - 如何在不折叠其他列的情况下创建具有全宽内容的 Bootstrap 可折叠面板？

Question

我正在尝试创建一个响应式网格来显示在单击时显示详细信息的元素，我可以让它展开，但我的问题是被单击的元素旁边的元素会折叠展开的内容，我不希望这样, 我想把所有的元素都放在最上面，下面展开内容

这是我现在拥有的:

$(document).ready(function(){
$("#btn").click(function(){
    $("#toggleDemo").collapse('toggle');
});
 $("#btn2").click(function(){
    $("#toggleDemo2").collapse('toggle');
});
 $("#btn3").click(function(){
    $("#toggleDemo3").collapse('toggle');
});});

HTML:

<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" id="btn" class="btn btn-primary" value="Toggle Button">
  <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div>
<input type="button" id="btn2" class="btn btn-primary" value="Toggle Button 2">
  <div id="toggleDemo2" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript.</div>
<input type="button" id="btn3" class="btn btn-primary" value="Toggle Button 3">
<!-- Collapsible Element HTML -->
<div id="toggleDemo3" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div>

如果您对如何完成它有任何想法，我将不胜感激

Answer 1

试试这个，

你甚至不需要 JavaScript

<div>
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button">
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2" value="Toggle Button 2">
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample3" value="Toggle Button 3">
</div>      

<div class="collapse" id="collapseExample">
    content
</div>
<div class="collapse" id="collapseExample2">
    content 2
</div>
<div class="collapse" id="collapseExample3">
    content 3
</div>

Demo in fiddle