CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
hiramary melano
hiramary melano

Reputation: 1

How to create Bootstrap Collapsible Panels with full width content without collapsing other columns?

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

Here is what I have now:

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

Please if you have any idea on how to acomplish it I'd apreciate it

Upvotes: 0

Views: 2176

Answers (2)

Krish
Krish

Reputation: 1894

This can make with custom Jquery code instead of bootstrap. check below codes

Jquery

$(document).ready(function(){
  $(".btn-primary").click(function(){
      $(this).next('.collapse').slideToggle();
  });
});

HTML

<div class="collapses-panel">
  <input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button">

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

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

CSS

.collapses-panel {
  position: relative;
}
.btn-primary{
  display: block;
}
.collapse {
  display: none;
  background-color: gray;
}
@media (min-width: 768px) {
  .collapse {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
  }
  .btn-primary{
    display: inline-block;
  }
}

Demo fiddle: http://jsfiddle.net/nikhilvkd/ft4mnynh/7/

Upvotes: 0

Raviteja
Raviteja

Reputation: 3489

Try this,

You don't even need 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

Upvotes: 1

Related Questions