What's Required for Bootstrap Collapse?

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 class="card">
  <div class="card-header py-4" id="heading-1-1" data-toggle="collapse" role="button" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
    <h6 class="mb-0"><i data-feather="file" class="mr-3"></i>Title</h6>
  </div>
  <div id="collapse-1-1" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
    <div class="card-body">
      <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; } }

Solution

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/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

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

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


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