What's Required for Bootstrap Collapse?-CodePudding

This was originally working, until I removed some JS files and unused CSS. Now, I can no longer get the accordion buttons to expand. I believe my implementation doesn't require JS. However, to the best of my knowledge I reimplemented all JS that was present when it was working.

I believe my issue is that I'm missing the neccessary data-toggle within CSS. However, the original CSS file doesn't have any collapse toggles related to button or accordion classes. Only .nav.

HTML:

<div >
  <div  id="heading-1-1" data-toggle="collapse" role="button" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
    <h6 ><i data-feather="file" ></i>Title</h6>
  </div>
  <div id="collapse-1-1"  aria-labelledby="heading-1-1" data-parent="#accordion-1">
    <div >
      <p>Text</p>
    </div>
  </div>
</div>

CSS:

.collapse:not(.show) {
  display: none; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }

CodePudding user response：

Seeing as you've tagged this with bootstrap-4 I'm going to assume you're using Bootstrap 4.

If so, you need to use jQuery along with the Bootstrap JS bundle to use collapse:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Down below is a quick example demonstrating the use of collapse with both.

If you're using Bootstrap 5 however, jQuery is not a dependency. Just include the JS bundle.

Bootstrap 4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<button  type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Title
  </button>

<div  id="collapseExample">
  <div >
    <p>Text</p>
  </div>
</div>

Bootstrap 5 (no jQuery)

From https://getbootstrap.com/docs/5.0/components/collapse/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<p>
  <a  data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div  id="collapseExample">
  <div >
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

CodePudding user response：

The accordion uses collapse internally to make it collapsible. The collapse component requires the js bootstrap bundle.

Be sure to import the js bundle in element.

with cdn :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1 LCz02ROU9k972gdyvl AESN10 x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

Notice that some components require popper JS. Popper Js must be imported before Js Bootstrap bundle.

To get more information on which components require Js Bootstrap bundle, read the official documentation.