How to show active Bootstrap Accordion in a Laravel foreach loop?

Question

I'm trying to show active bootstrap accordion in a laravel foreach loop, but I'm facing an issue.

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.

Here's my code :

<div class="course-dashboard-side-content">
                        @foreach ($formation->sections as $section)
                        @php
                        $increment++;
                        @endphp
                        <div class="accordion course-item-list-accordion" id="accordionCourseMenu">
                            <div class="card">
                                <div class="card-header" id="collapseMenuOne">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link" type="button" data-toggle="collapse"
                                            data-target="#collapseSection-{{ $section->id }}" aria-expanded="false"
                                            aria-controls="collapseOne">
                                            <span class="widget-title font-size-15 font-weight-semi-bold">Section
                                                {{ $increment }}: {{ $section->name }}</span>
                                            <div class="course-duration">
                                                <span>{{ $section->courses->count() }} Vidéos </span>
                                                <span>Durée Totale</span>
                                            </div>
                                        </button>
                                    </h2>
                                </div>
                                <div id="collapseSection-{{ $section->id }}" class="collapse" aria-labelledby="collapseMenuOne" data-parent="#accordionCourseMenu">
                                    <div class="card-body">
                                        <div class="course-content-list">
                                            <ul class="course-list">
                                                @foreach ($section->courses as $course)
                                                @php
                                                $increment2++;
                                                @endphp

                                                <li class="course-item-link {{ $loop->first ? 'active' : '' }}">
                                                    <div class="course-item-content-wrap">
                                                        <div class="custom-checkbox">
                                                            <input type="checkbox" id="chb29">
                                                            <label for="chb29"></label>
                                                        </div>
                                                        <div class="course-item-content">
                                                            <h4
                                                                class="widget-title font-size-15 font-weight-medium">
                                                                {{ $increment2 }}.
                                                                <a href="{{ route('student.course.chapitre',  [
                                                                    $formation->slug,
                                                                    'course' => $course->slug,
                                                                    'id' => $section->id,
                                                                ]) }}">

                                                                    {{ $course->name }}
                                                                </a>
                                                            </h4>
                                                            <div class="courser-item-meta-wrap">
                                                                <p class="course-item-meta"><i
                                                                        class="la la-play-circle"></i>Durée</p>
                                                                @if ($course->document)
                                                                <div class="msg-action-dot">
                                                                    <div class="dropdown">
                                                                        <a class="theme-btn theme-btn-light"
                                                                            href="#" data-toggle="dropdown"
                                                                            aria-haspopup="true"
                                                                            aria-expanded="false">
                                                                            <i class="fa fa-folder-open mr-1"></i>
                                                                            Document<i
                                                                                class="fa fa-angle-down ml-1"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                @else

                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

Also, is there a way to make the li active?

I tried different ways, but I failed.

Answer 1

            <ul class="faq-list">
                @forelse ($faqs as $faq)
                    <li>
                    <div data-bs-toggle="collapse" class="collapsed question" href="#faq{{ $faq->id }}">{{ $faq->question }}<i class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
                    <div id="faq{{ $faq->id }}" class="collapse" data-bs-parent=".faq-list">
                        <p>
                            {{ $faq->answer }}
                        </p>
                    </div>
                    </li>
                @empty
                    <div>No Questions Found</div>
                @endforelse
            </ul>