I'm currently working on a responsive grid that displays items with expandable details when clicked. My issue is that when one item expands, the elements next to it collapse down, which is not what I want. I want all items to stay at the top and have their content expanded below.
Current setup:
$(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>
If you have any suggestions on how to achieve this layout, please share them with me. Thank you!