title: How to show active Bootstrap Accordion in a Laravel foreach loop?
body: <p>I'm trying to show active bootstrap accordion in a laravel foreach loop, but I'm facing an issue.</p>
  <p><a href="https://i.stack.imgur.com/l8GgV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8GgV.jpg" alt="enter image description here" /></a></p>
  <p>What I'd like to do is what you see on the top image. But when I refresh the browser, the accordion closes as you can see on the bottom image.</p>
  <p>Here's my code :</p>
  <pre><code>&lt;div class=&quot;course-dashboard-side-content&quot;&gt;
                          @foreach ($formation-&gt;sections as $section)
                          @php
                          $increment++;
                          @endphp
                          &lt;div class=&quot;accordion course-item-list-accordion&quot; id=&quot;accordionCourseMenu&quot;&gt;
                              &lt;div class=&quot;card&quot;&gt;
                                  &lt;div class=&quot;card-header&quot; id=&quot;collapseMenuOne&quot;&gt;
                                      &lt;h2 class=&quot;mb-0&quot;&gt;
                                          &lt;button class=&quot;btn btn-link&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot;
                                              data-target=&quot;#collapseSection-{{ $section-&gt;id }}&quot; aria-expanded=&quot;false&quot;
                                              aria-controls=&quot;collapseOne&quot;&gt;
                                              &lt;span class=&quot;widget-title font-size-15 font-weight-semi-bold&quot;&gt;Section
                                                  {{ $increment }}: {{ $section-&gt;name }}&lt;/span&gt;
                                              &lt;div class=&quot;course-duration&quot;&gt;
                                                  &lt;span&gt;{{ $section-&gt;courses-&gt;count() }} Vidéos &lt;/span&gt;
                                                  &lt;span&gt;Durée Totale&lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/button&gt;
                                      &lt;/h2&gt;
                                  &lt;/div&gt;
                                  &lt;div id=&quot;collapseSection-{{ $section-&gt;id }}&quot; class=&quot;collapse&quot; aria-labelledby=&quot;collapseMenuOne&quot; data-parent=&quot;#accordionCourseMenu&quot;&gt;
                                      &lt;div class=&quot;card-body&quot;&gt;
                                          &lt;div class=&quot;course-content-list&quot;&gt;
                                              &lt;ul class=&quot;course-list&quot;&gt;
                                                  @foreach ($section-&gt;courses as $course)
                                                  @php
                                                  $increment2++;
                                                  @endphp
  
                                                  &lt;li class=&quot;course-item-link {{ $loop-&gt;first ? 'active' : '' }}&quot;&gt;
                                                      &lt;div class=&quot;course-item-content-wrap&quot;&gt;
                                                          &lt;div class=&quot;custom-checkbox&quot;&gt;
                                                              &lt;input type=&quot;checkbox&quot; id=&quot;chb29&quot;&gt;
                                                              &lt;label for=&quot;chb29&quot;&gt;&lt;/label&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class=&quot;course-item-content&quot;&gt;
                                                              &lt;h4
                                                                  class=&quot;widget-title font-size-15 font-weight-medium&quot;&gt;
                                                                  {{ $increment2 }}.
                                                                  &lt;a href=&quot;{{ route('student.course.chapitre',  [
                                                                      $formation-&gt;slug,
                                                                      'course' =&gt; $course-&gt;slug,
                                                                      'id' =&gt; $section-&gt;id,
                                                                  ]) }}&quot;&gt;
  
                                                                      {{ $course-&gt;name }}
                                                                  &lt;/a&gt;
                                                              &lt;/h4&gt;
                                                              &lt;div class=&quot;courser-item-meta-wrap&quot;&gt;
                                                                  &lt;p class=&quot;course-item-meta&quot;&gt;&lt;i
                                                                          class=&quot;la la-play-circle&quot;&gt;&lt;/i&gt;Durée&lt;/p&gt;
                                                                  @if ($course-&gt;document)
                                                                  &lt;div class=&quot;msg-action-dot&quot;&gt;
                                                                      &lt;div class=&quot;dropdown&quot;&gt;
                                                                          &lt;a class=&quot;theme-btn theme-btn-light&quot;
                                                                              href=&quot;#&quot; data-toggle=&quot;dropdown&quot;
                                                                              aria-haspopup=&quot;true&quot;
                                                                              aria-expanded=&quot;false&quot;&gt;
                                                                              &lt;i class=&quot;fa fa-folder-open mr-1&quot;&gt;&lt;/i&gt;
                                                                              Document&lt;i
                                                                                  class=&quot;fa fa-angle-down ml-1&quot;&gt;&lt;/i&gt;
                                                                          &lt;/a&gt;
                                                                      &lt;/div&gt;
                                                                  &lt;/div&gt;
                                                                  @else
  
                                                                  @endif
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/li&gt;
                                                  @endforeach
                                              &lt;/ul&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          @endforeach
                      &lt;/div&gt;
  </code></pre>
  <p>Also, is there a way to make the li active?</p>
  <p>I tried different ways, but I failed.</p>