Bootstrap 4 toogle not hiding back the next div

user_9427866 0
Viewed 68

I have two divs and need to hide one div when the other div is displayed.

My bootstrap code is as below

However, in my case, each divs are displaying and my code is not working as expected.

Please help.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">
          Toggle Bar
        </button>
<div id="Foo" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>

bootstrap-4 css html jquery javascript
3 Answers

Add jquery on button click to hide the .collapse div like below:

$('.btn-toggle').click(function(){
  $('.collapse.show').removeClass('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<a href="#Foo" class="btn btn-default btn-toggle" data-toggle="collapse">Toggle Foo</a>

<button href="#Bar" class="btn btn-default btn-toggle" data-toggle="collapse">
  Toggle Bar
</button>

<div id="Foo" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>

user_63641900

You need to follow the logic of accordion by considering data-parent and an extra container.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="main">
<a href="#Foo" class="btn btn-default" data-toggle="collapse" >Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse" >
          Toggle Bar
        </button>
<div id="Foo" data-parent="#main" class="collapse">This div (Foo) is hidden by default</div>
<div id="Bar" data-parent="#main" class="collapse in">
  This div (Bar) is shown by default and can toggle
</div>
</div>

user_86203330

Bootstrap collapse will simply show or hide the particular relevant information. According to your requirement you have to choose the correct bootstrap component and apply styles as per your display purpose. In your case, you need to use Bootstrap Accordion.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">      
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse1">Button 1</button>
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse2">Button 2</button>
      <button data-toggle="collapse" data-parent="#accordion" href="#collapse3">Button 3</button>        
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Button ONe INformation Will show Here.</div>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Button TWO INformation Will show Here.</div>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Button Three INformation Will show Here..</div>
      </div>
    </div>
    
    
  </div>

user_36070640
Related