Bootstrap collapse with accordion not working

Question

I needed a collapse and show functionality..

My code is given below

<div class="accordion" id="Preview">
      <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingOne2">
          <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne2"
              aria-expanded="true" aria-controls="collapseOne2">
              Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne2" class="collapse" aria-labelledby="headingOne2"
          data-parent="#Preview">
          <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.
          </div>
        </div>
      </div>
      <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingTwo2">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
              Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
          data-parent="#Preview">
          <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.
          </div>
        </div>
      </div>
      <div class="card z-depth-0 bordered">
        <div class="card-header" id="headingThree2">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
              Collapsible Group Item #3
            </button>
          </h5>
        </div>
        <div id="collapseThree2" class="collapse" aria-labelledby="headingThree2"
          data-parent="#Preview">
          <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.
          </div>
        </div>
      </div>
    </div>

but it is not working..the buttons are coming as such..but not collapsing and showing the data inside the card.

[![image of output][1]][1]

The hover and all is working fine but not collapsing. [1]: https://i.stack.imgur.com/ndr4I.png

what would be the reason?

Can you add full html code here? have you imported boostrap styles in to angular.json file? — Sudhakar
This is the html code for accordion..rest is only a h4 header. and yes ..i imported bootstrap in angular.json other bootstrap functionalities are working fine..only problem with this accordion — Roby A

damienHelper damienHelper · Accepted Answer · 2020-07-08T11:15:29

I ran your scripts with these following files and scripts in the head and it worked as expected. You might be missing one of these or dont have the latest version?

# Bootstrap CSS
<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">

# Jquery
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

# Bootstrap JS
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap collapse with accordion not working

1 Answers