i have accordion inside the accordion, when i opened second accordions data first one opens too also when i want to close with parent accordion children are still open, i think i have same id or something?

here is my stackblitz

<div *ngFor="let p of options; last as isLast; let i = index">
    <div >
      <div type="radio" id="{{ p.value }}">
        <label for="{{ p.value }}">
              <h3>{{ p.name }}</h3>
              <button
                
                type="button"
                id="btn"
                (click)="openAccordion[i] = !openAccordion[i]"
                data-bs-toggle="collapse"
                [attr.data-target]="'#collapse'   i"
                aria-expanded="false"
                [attr.aria-controls]="'collapse'   i">
                >More
              </button>
        </label>
      </div>
    </div>
      <div  *ngFor="let d of p.details; let a = index">
          <div >
            <div
              [attr.id]="'collapse'   i"
              
              [class.show]="openAccordion[i]"
              [attr.aria-labelledby]="'heading'   i"
              data-bs-parent="#accordionExample">
                <div >
                  {{ d.leftSide }}
                </div>
                <div >
                  <button
                    (click)="openAccordion[a] = !openAccordion[a]"
                    data-bs-toggle="collapse2"
                    [attr.data-target]="'#collapse2'   a"
                    aria-expanded="false"
                    [attr.aria-controls]="'collapse2'   a">
                    {{ d.rightSide }}
                  </button>
                </div>
            </div>
            <div
              
              [attr.id]="'collapse2'   a"
              
              [class.show]="openAccordion[a]"
              [attr.aria-labelledby]="'heading2'   a">
              <div >
                {{ d.description }}
              </div>
            </div>
    </div>
</div>

CodePudding user response：

first of all you need to close the div at the last line and there is also some error in line 47, you have repeated a class. Maybe fixing these two work . I know I am going off topic but I just wanted to answer (first answer, more like a reply lol).

CodePudding user response：

You need to have your second ngFor on the details section.

<div class="data-policy">
  <div
    class="row mt-4"
    style="margin-bottom: -15px;"
    *ngFor="let p of options; last as isLast; let i = index"
  >
    <div class="col-12">
      <div class="hidden-radio choose-policy">
        <div type="radio" id="{{ p.value }}">
          <label for="{{ p.value }}">
            <div class="row align-items-center d-flex">
              <div class="first">
                <h3>{{ p.name }}</h3>
              </div>
              <div class="second">
                <span>{{ p.description }}</span>
              </div>
              <div class="third">
                <button
                  class="btn btn-primary more"
                  type="button"
                  id="btn"
                  (click)="openAccordion[i] = !openAccordion[i]"
                  data-bs-toggle="collapse"
                  [attr.data-target]="'#collapse'   i"
                  aria-expanded="false"
                  [attr.aria-controls]="'collapse'   i"
                >
                  <i class="fas fa-chevron-down" id="icon"></i> >More
                </button>
              </div>
            </div>
          </label>
        </div>
      </div>
      <div class="col-12">
        <div
          class="data"
          *ngFor="let d of p.details; let a = index"
          [id]="'collapse'   i"
          class="accordion-collapse collapse"
          [class.show]="openAccordion[i]"
          [attr.aria-labelledby]="'heading'   i"
          data-bs-parent="#accordionExample"
        >
          <div class="row">
            <div class="col">
              <div>
                <div class="policy-data">
                  <div class="policy-title">
                    {{ d.leftSide }}
                  </div>
                  <div class="policy-type">
                    <button
                      (click)="openAccordion[a] = !openAccordion[a]"
                      data-bs-toggle="collapse2"
                      [attr.data-target]="'#collapse2'   a"
                      aria-expanded="false"
                      [attr.aria-controls]="'collapse2'   a"
                    >
                      {{ d.rightSide }}
                      <i class="ms-2 fas fa-chevron-down" id="icon"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div
                class="collapse multi-collapse"
                [attr.id]="'collapse2'   a"
                class="accordion-collapse collapse"
                [class.show]="openAccordion[a]"
                [attr.aria-labelledby]="'heading2'   a"
              >
                <div class="policy-desc">
                  {{ d.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>