Expand and Collapse with multiple buttons and divs

Question

I need help in collapsing the divs when the button is clicked again.

I have this code:

$('#btn1').click(function() {
  $('.collapse').hide();
  $('#demo').show();
});
$('#btn2').click(function() {
  $('.collapse').hide();
  $('#demo1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

From here: Bootstrap Collapse with multiple button and div

This code works and hides div1 when the button2 is clicked and expands div2 but it does not hide the div2 when button2 is clicked again.

Is there a way to show div1 when button1 is clicked and hide the div1 when button2 is clicked and expand div2. But when button2 is clicked again, it hides div2 and hence all the collapsible divs are collapsed and this behaviour works with button1 and div1 too.

Answer 1

$('#btn1').click(function(){
 // $('.collapse').hide();
  $('#demo1').hide();
  $('#demo').show();
});
$('#btn2').click(function(){
  //$('.collapse').hide();
  $('#demo').hide();
  $('#demo1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container" ng-app="myApp" ng-controller="customersCtrl">
    <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo" id="btn1" >Company Details</button>
      <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo1" id="btn2">Commercial Details</button>
      <div id="demo" class="collapse" >
        1st div
      </div>

      <div id="demo1" class="collapse">
        2nd div
      </div>
    </div>

Answer 2

Update your script like this

$('#btn1').click(function(){

      if($('#demo').is(':visible')){
           $('#demo').hide();
      }else{
          $('#demo1').hide();
          $('#demo').show();

      }

    });
    $('#btn2').click(function(){

      if($('#demo1').is(':visible')){
           $('#demo1').hide();
      }else{
           $('#demo').hide();
          $('#demo1').show();
      }
    });

Answer 3

I will suggest you to hide both the div at first and then you can use toggle

Stack Snippet

$('#demo1,#demo').hide()
$('#btn1').click(function() {
  $('#demo1').hide();
  $('#demo').toggle();
});
$('#btn2').click(function() {
  $('#demo').hide();
  $('#demo1').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>