Boot Strap Accordian Not collapsing

Question

Hi y'all I'm trying to replicate a collapsing accordian example I found on https://getbootstrap.com/docs/4.1/components/collapse/ but for some reason they are not collapsing. In fact they start in the uncollapsed position which I think is strange because in the exmaple they start collapsed and then on the button click they collapse open. Anyways here is my code, I hope someone out there can help because I can't figure this out.

FINAL UPDATE: for any googlers that stumble upon this Here is the code that worked for me. Notice that the data-target => attr.data-target is the only way to use text binding with the data-target

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="accordion" id="accordionExample">
  <div class="card" *ngFor="let grocery of groceryList;index as index">
    <div class="card-header" id="grocery1{{index}}">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#grocery2{{index}}" aria-expanded="true" aria-controls="grocery2{{index}}">
          {{grocery.recipeName}}
        </button>
      </h5>
    </div>

    <div id="grocery2{{index}}" class="collapse show" aria-labelledby="grocery1{{index}}" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group" id="filterList">
          <li class="list-group-item">
            <a href="#" class="list-down-btn" data-toggle="#subgroup"><span class="glyphicon glyphicon-chevron-down"></span></a>
            <ul id="subgroup" class="list-group">
              <li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

BS4 requires jQuery, make sure you've got all of the required JS/CSS libraries [listed on the Getting Started](https://getbootstrap.com/docs/4.1/getting-started/introduction/) page. — Reece, Sep 02 '20 at 21:19
@Reece When I copy and paste straight from the example everything works fine so i know everything that is req is there — jakegergen, Sep 02 '20 at 21:21
You are actualy having planty of missing character such as double quote on the id, data-target + you need to add hash (#) into your data-target to get sure that it is target the right id. And finaly, it seems that you are grocery._id 2 times as ID. You should not do such thing as an ID is uniq, specialy when you are going to target them — MaxiGui, Sep 02 '20 at 21:26

MaxiGui · Accepted Answer · 2020-09-02T22:29:52.270

So following you will find the list of problem you had:

ID are similar from header and child
Missing double quote
Simulation did not worked here because of the "." in the id that are breaking the ID

PS: Based on your code your code, the problem is that actualy you have a conflic between Bootstrap and another tool, because it does not show the arial-controls.

Please find a snippet demo working below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="accordion" id="accordionExample">
  <div class="card" *ngFor="let grocery of groceryList">
    <div class="card-header" id="grocery1">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#grocery2" aria-expanded="true" aria-controls="grocery2">
          {{grocery.recipeName}}
        </button>
      </h5>
    </div>

    <div id="grocery2" class="collapse show" aria-labelledby="grocery1" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group" id="filterList">
          <li class="list-group-item">
            <a href="#" class="list-down-btn" data-toggle="#subgroup"><span class="glyphicon glyphicon-chevron-down"></span></a>
            <ul id="subgroup" class="list-group">
              <li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

It seems that Angular and Bootstrap accordion/collapse are no so friendly based on the different subject on stack overflow:

MaxiGui thank you so much, your code snippet works. But my only problem now is everything opens and closes together. EDIT: actually I fixed that by using {{index}}{{grocery}} instead. of grocery1 and grocery2. thanks again — jakegergen, Sep 02 '20 at 22:32
I guess because your id that you are targeting are the same everywhere you need to customize them to make them uniq — MaxiGui, Sep 02 '20 at 22:34
@jakegergen yeah I should have said that I removed your "{" to make it work but it was looking obvious. If all is fine, please validate answer to show that subject is done for you, and do not hesitate to upvote as well :) Edit: Thank you — MaxiGui, Sep 02 '20 at 22:37
thank you so much for your time you really saved my ass. And thank you to Reece for helping me change data-target to attr.data-target. You both are rockstars that make StackOverflow such an amazing resoruce. — jakegergen, Sep 02 '20 at 22:41

Boot Strap Accordian Not collapsing

1 Answers1