How to create Bootstrap Collapsible Panels with full width content without collapsing other columns?
<p>I'm trying to create a responsive grid to displays items that show details when clicked, I can get it to expand but my problem is the elements next to the one clicked collapses down the expanded content and I don't want that, I want to keep all the items at the top and have the content expanded below</p>

<p>Here is what I have now:</p>

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

<p>HTML: </p>

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

<p>  </p>

<p>Please if you have any idea on how to acomplish it I'd apreciate it</p>