单击后Bootstrap崩溃不崩溃

Question

I'm using bootstrap 4 alpha collapse option..I have two menu and i have given the collpase class position:absolute.So that when ever i click on any collapse button it should open it's content and when click the next collapse button it should show it's content .Everything works fine but problem is when i click the GOOD button it showing it's content and the click Bad button it showing it's content in place of Good buttons content but if i again click on the BAD button or Good button again it is not collapsing the content just moving the content one to another.

<p>
  <a class="btn btn-danger" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>


.collapse{
  position:absolute;
  width:100%;
}

I want to use this collapse as click on single button it would show content and again click on that button it should collapse and when click first on Good button then if i click Bad button it should close the good button's content and show the Bad button content vice versa.

Here is DEMO

Answer 1

The problem with provided example is that when using position:absolute will will overlap next element and hence giving weird behavior.

The solution for this problem is that we have to remove position:absolute from CSS and we have to close all collapsible before opening other ones.

Here is the working example : https://jsfiddle.net/ep2s35cm/

HTML

<p>
  <a class="btn btn-danger myButton" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary myButton" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>

CSS

.collapse{
  width:100%;
}

JavaScript

$(document).ready(function(){
 $('.myButton').on('click',function(){
 $('.collapse').collapse('hide');
 })
})