title: Dynamic accordion for lists in angular using bootstrap accordion
body: <p>I have written the code for dynamic accordions it showing the design correctly but functionalies(hide/show) are not working. Below i have shared the code please help me in this problem.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
  &lt;div class=&quot;accordion ms-auto col-sm-10&quot; id=&quot;accordionExample&quot; *ngFor=&quot;let category of categories;let i = index&quot;&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h2 class=&quot;accordion-header&quot; id=&quot;'heading'+i&quot;&gt;
        &lt;button class=&quot;accordion-button&quot; [ngClass]=&quot;{ 'collapsed': i != 0 }&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot;
         attr.data-target=&quot;'#collapse'+i&quot; [attr.aria-controls]=&quot;'collapse'+i&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          {{category.title}}
        &lt;/button&gt;
      &lt;/h2&gt;
      &lt;div id=&quot;'collapse'+i&quot; class=&quot;accordion-collapse collapse show&quot; *ngFor=&quot;let item of category.symptoms&quot;
       data-bs-parent=&quot;#accordionExample&quot; [ngClass]=&quot;{ 'show': i == 0 }&quot; [attr.aria-labelledby]=&quot;'heading'+i&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;
           &lt;div class=&quot;boxes&quot; style=&quot;width:180px;height: 100px;background-color: rgb(236, 243, 253);border-radius: 10px;&quot;&gt;
           &lt;input type=&quot;checkbox&quot; style=&quot;margin-left: 10px;margin-top: 10px;&quot;&gt; {{item.title}}
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>