Div doesn't collapse while other div expands bootstrap

Question

I've tried all the answers posted previously on same type of question. Basically i want these two buttons two be in a line and only one of them should collapse at a time.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
  <div class="accordion-group">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>
</div>

Answer 1

How Bootstrap v3 implements the accordion is somewhat of a blackbox (unless you really dig into the logic of the JS behind the scenes). However, this is what I understand based on some testing:

1. The controls can be arbitrarily nested
2. The accordion elements must be wrapped by a <div> with the class of .panel
3. The wrapper divs must be:
   • siblings of each other and
   • the direct descendent of the element specified in data-parent attribute (e.g. #accordion in your example), without any additional nesting

With that in mind, here are some changes you can make to your original DOM:

1. Move the #accordion ID to the wrapper of the panels
2. The controls can be positioned anywhere on the page, as long as data-toggle="collapse" anddata-parent="#accordion`" is declared ;)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--
  Controls can be arbitrarily nested, no problem
  As a proof-of-concept, I have nested them three <div>s deep :) 
-->
<div><div><div>
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
</div></div></div>

<div id="accordion" class="accordion-group">

  <!-- Panel elements must be direct child of data-parent (#accordion) -->
  <div class="panel">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
  </div>

  <div class="panel">
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>

</div>

Answer 2

why don't you look at this :)

$(document).ready(function(){
$(".b1").click(()=>{
$("#menu2").hide();
$("#menu1").show();
 });
  $(".b2").click(()=>{
$("#menu2").show();
$("#menu1").hide();
})

});

https://jsbin.com/tikajukexe/edit?html,js,output