Does not automatically close in Bootstrap 4 collapse feature

Hey there, I need some help with my implementation of bootstrap 4 collapse. I'm running into an issue where I added two collapsible elements within the same div. When I click on the first collapse and then try to close the second one, the first collapse doesn't automatically close. Does anyone know how to resolve this issue? Any help would be greatly appreciated! Thanks

Here's a snippet of my code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div>
  <p>

    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExampled">
      Collapse 01
    </button>
  </p>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit nisi et libero dapibus scelerisque.
    </div>
  </div>
<br>

  <p>

    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamples" aria-expanded="true" aria-controls="collapseExampled">
      Collapse 002
    </button>
  </p>
  <div class="collapse" id="collapseExamples">
    <div class="card card-body">
      Duis bibendum nisl vitae odio eleifend, ac ultrices risus tincidunt. Nullam ut lectus eu turpis fringilla imperdiet.
    </div>
  </div>
</div>

javascriptcssbootstrap-4

Answer №1

Consider utilizing Accordion feature instead of using Multiple targets. For an example, you can refer to this link: https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example. Hopefully, this will be helpful.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionExample">
  <div class="">
    <div class="" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis ultricies nisl. Duis non eros ac leo tristique tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
      </div>
    </div>
  </div>
  
  <!-- Additional collapsed items here -->
  
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer №2

The Accordion collapse example you're seeking only allows one panel to be open at a time while keeping the others closed. This functionality is achieved through the use of classes "collapse & show":

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
  
 <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>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of React by utilizing SVGR to easily integrate SVG files

Wondering if there's a way to bring in an SVG file from my public folder and use it as a React component like this: import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg'; const MyComponent = () => { return ( <div> ...

javascriptreactjssvgsvg-react-loader

Can anyone share a straightforward yet practical demonstration of using jquery.JsPlumb?

In my quest for a reliable graph-visualization JavaScript library, I recently came across jsPlumb at http://jsplumb.org. The examples I've seen truly showcase its advanced capabilities and attractive design. However, despite the extensive documentatio ...

javascriptjqueryjquery-uijsplumb

Encountering a Bad Request error when making a POST request with Axios and dealing with CORS in a Django and

I encountered a successful post request when using Postman to the URL http://localhost:8000/api/auth/users/. However, attempting the same request on my React front end resulted in a 400 (bad request error) along with an Uncaught Promise Error stating "Requ ...

javascriptreactjsaxiosdjango-cors-headers

Navigating the proper utilization of exports and subpaths in package.json with TypeScript

As a newbie in creating npm packages using TypeScript, I've encountered some issues that I believe stem from misinterpreting the documentation. Currently, I am working with Node 16.16.0 and npm 8.13.2. Here is the structure of my project: src/ ├─ ...

javascripttypescriptnpmpackage.json

Alert when Leaving Page with AJAX Navigation

I need help with adding a confirmation before navigating away from the page I'm currently working on. Here is my general structure: The main page is called componentmanagement.php and it has a loader with functions like this, <li> ...

javascriptjqueryajax

I'm baffled by the constant undefined status of the factory in AngularJS

I have encountered an issue where I defined a factory that makes a get request, but when I inject it into a controller, it always throws an undefined error. Below is the code for the factory: (function() { 'use strict'; var app = angul ...

javascriptangularjsweb

The generation of React Native Jest coverage results may vary depending on how an ES6 module is exported

I am working with a React Native button component that consists of its own index.js and styles.js files. The content of styles.js is as follows: import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { borderRadius ...

javascriptreact-nativejestjs

Sending files in Express causes issues

I keep receiving the following message: express deprecated res.sendfile: Use res.sendFile instead Here is the code snippet in question: app.get('/*', function (req, res) { var myUrl = req.url.split('/')[1]; myownfunction(myUrl ...

javascriptnode.jsexpressfilepathsendfile

What causes the discrepancy in the expiresIn value of my JWT when it is transmitted from the server to the front-end?

After setting the token expiry date on the server, I decided to log out the value to double-check it. However, upon checking the value on my React front-end, I noticed a significant change in the value received compared to what was sent from the server. Is ...

javascriptnode.jsjwt

In a single twig file, the error message "jQuery undefined is not a function" is

I'm encountering an issue where I am receiving the "undefined is not a function" error only in a specific location. The error occurs at var dropdown and I'm having trouble pinpointing the exact cause. On other pages where I include this .js file ...

javascriptjquerydrop-down-menu

Error: The variable "context" has not been defined

I am currently facing an issue while trying to develop a sendNotification function using node.js and Firebase function. I am encountering a problem where I am not receiving any notifications from the sender, and upon checking the Firebase function logs, I ...

javascriptnode.jsfirebasefirebase-realtime-databasegoogle-cloud-functions

Basic reflection of data within Meteor's template

I am new to meteor and struggling with understanding how templates work with data reflection. I have some data in my database that looks like this: {name: {firstName: "foo", lastName: "bar"}, father: "buz"} The way I am able to reflect it is confusing to ...

javascriptnode.jsmongodbmeteorhandlebars.js

Errors always occur when making POST requests in SAPUI5, leading to a 500 Server Error specifically related to OData

Currently diving into the world of SAPUI5 and OData, I am in the process of creating a basic application that showcases employee data in a table. The objective is to add a new employee to the table whose information will be stored in the SAP backend. Whil ...

javascriptodatasapui5sap-gateway

Certain browsers have limitations when it comes to dynamically calling a .js file from an HTML page

Calling a .js file from my HTML page is done like this: var value1 = "Hello"; var value2 = "John"; var oHead1 = document.getElementsByTagName('HEAD').item(0); var paramScript = document.createElement("script"); paramScript.type = "text/javasc ...

javascriptblackberrycross-browser

AngularJS is throwing a cancelled HTTP request error and reporting a 404 status code

Currently, I am facing an issue with making HTTP requests in angular. The complexity of the database query results in a long wait time for the request to be completed. However, if the user decides to navigate to a different page before the request is fin ...

javascriptangularjshttp

"Learn the process of tallying strings within a td table with the help of

I am looking to count the number of occurrences of a string in the column labeled status. However, I am uncertain about how to implement this logic using JavaScript. Click here for an image example ...

javascript

What approach should I take to properly naming a navbar structure using BEM methodology?

Here is a snippet of SASS code that I need help transforming using the BEM methodology. How can I rewrite this block of code to follow the BEM naming conventions? .nav__primary ul { border-top: 2px solid $darkgreen; display:block; margin:10p ...

csssassbem

Launch a nearby hyperlink in a separate tab

I am currently facing an issue where all the URLs in a Text get linked as Hyperlinks. However, when a user types www., the browser interprets it as a local URL and associates the link with the application's URL. Does anyone know how to open a local U ...

javascriptjqueryhtml

Is there a way to choose all elements in the Bootstrap pagination code using JavaScript?

Recently, I've been working on a website with Bootstrap, and I encountered an issue with the overflow scroll bar that I had to hide using CSS. To navigate the pagination with the mouse wheel, I've been experimenting with JavaScript. I found that ...

javascriptarraysbootstrap-5

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

javascriptjqueryhtmljquery-ui