The issue with Bootstrap 4 toggle not correctly hiding the following div

Question

The issue with Bootstrap 4 toggle not correctly hiding the following div

I am trying to hide one div when the other div is displayed using Bootstrap code.

However, both divs are currently displaying and my code is not working as intended.

If anyone can provide assistance, it would be greatly appreciated.

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

javascript html jquery css bootstrap-4

Answer 1

Answer №1

For a successful implementation, it is crucial to grasp the concept of using an accordion with the inclusion of data-parent and an additional 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) remains hidden by default</div>
<div id="Bar" data-parent="#main" class="collapse in">
  This div (Bar) is initially displayed and can be toggled.
</div>
</div>

Answer 2

For a successful implementation, it is crucial to grasp the concept of using an accordion with the inclusion of data-parent and an additional 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) remains hidden by default</div>
<div id="Bar" data-parent="#main" class="collapse in">
  This div (Bar) is initially displayed and can be toggled.
</div>
</div>

Answer 3

Answer №2

Use jQuery to conceal the .collapse div upon button click:

$('.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 section (Foo) remains concealed by default</div>
<div id="Bar" class="collapse in">
  This part (Bar) is visible by default and can be toggled on and off
</div>

Answer 4

Use jQuery to conceal the .collapse div upon button click:

$('.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 section (Foo) remains concealed by default</div>
<div id="Bar" class="collapse in">
  This part (Bar) is visible by default and can be toggled on and off
</div>

Answer 5

Answer №3

Bootstrap collapse feature allows you to toggle the visibility of specific content on your webpage. Depending on your needs, you can select the appropriate bootstrap component and customize it to suit your design requirements. In this scenario, utilizing Bootstrap Accordion would be ideal.

<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">Information for Button 1 will be displayed here.</div>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Information for Button 2 will be displayed here.</div>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Information for Button 3 will be displayed here.</div>
      </div>
    </div>
    
    
  </div>

Answer 6

Bootstrap collapse feature allows you to toggle the visibility of specific content on your webpage. Depending on your needs, you can select the appropriate bootstrap component and customize it to suit your design requirements. In this scenario, utilizing Bootstrap Accordion would be ideal.

<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">Information for Button 1 will be displayed here.</div>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Information for Button 2 will be displayed here.</div>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Information for Button 3 will be displayed here.</div>
      </div>
    </div>
    
    
  </div>

The issue with Bootstrap 4 toggle not correctly hiding the following div

Answer №1

Answer №2

Answer №3

Similar questions

Unable to input data into the Database using an HTML Form combined with PHP

communication flow in two directions between server and client

Collection of categories within the drop-down menu

Storing JavaScript Array for Future Use in a Separate File

`Using Twitter Bootstrap in mobile app development with javascript`

Verify the email address for accuracy and display an error message beneath the email input field if necessary

Tips for activating a click event on a changing element within a Vue.js application

Modifying the URL does not alter the selected tab

Obtain an item from an array by utilizing the property with Lodash _.find

Guide on how to retrieve and log a list of objects from a map using Puppeteer, based on elementsArray obtained through the use

How to create a jQuery image slider without specifying a fixed width?

Using JavaScript to display a live data table on a website sourced from Firebase

What could be the reason behind the malfunction of query manipulation?

Styling the content within Template Strings is not supported by VSCode

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

How can you effectively update the content of a Parent component in react-native by communicating with its child component?

Is it possible to place a secondary read more button next to the first one using CSS?

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

Maintain saved states upon page load/refresh using jQuery Cookies