Laravel Bootstrap Accordion is not working properly?

Question

In my accordion I am showing the parent items. Which I am getting by using getItems() method. It is being linked to every item. And every parent item has some child items. Which I am getting using ($item->children as $child) And when clicks any parent item, the child items of that parent item should be visible from drop down.

The problem is whenever I click any parent item, every child item is being shown in the drop down. But I want only the child item of the parent item to be shown. It would be nice If someone can help me out. Thanks in advance.

This is my blade file code.

<div class="container my-4">
        <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
          <div class="card">
            <div class="card-header" role="tab" id="headingTwo2">
              @foreach(getItems() as $item)
                <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                  aria-expanded="false" aria-controls="collapseTwo2">
                  <h5 class="mb-0">
                    {{ $item->name }} <i class="fas fa-angle-down rotate-icon"></i>
                  </h5>
                </a>
                <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                  data-parent="#accordionEx">
                  <div class="card-body">
                     @foreach ($item->children as $child)
                      <a href="{{ route('category.island.list') }}?category={{ $child->id }}"
                      class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
                      <span>{{ $child->name }}</span>
                      </a>
                @endforeach
                  </div>
                </div>
              @endforeach
            </div>

          </div>
          
        </div>
      </div>

Answer 1

This is normal, because they all have the same href here:

<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                  aria-expanded="false" aria-controls="collapseTwo2">

and they all have make reference to the same "id" in this div:

<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                 data-parent="#accordionEx">

So just add a variable in your foreach as a "count" that will increase foreach loop and you just add that into your href and Id with twig and that is fine:)

Twig way: Out of 1st foreach: TWIG: {% set count = 0 %} PHP: <?php $count = 0; ?> <?php $count = 0; ?> In your 1st foreach at the end: TWIG: {% set count = count + 1 %} PHP: <?php $a++; ?> <?php $a++; ?> As follow:

    <div class="container my-4">
            <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="headingTwo2">
<?php $count = 0; ?>
                  @foreach(getItems() as $item)
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2{{ $count }}"
                      aria-expanded="false" aria-controls="collapseTwo2{{ $count }}">
                      <h5 class="mb-0">
                        {{ $item->name }} <i class="fas fa-angle-down rotate-icon"></i>
                      </h5>
                    </a>
                    <div id="collapseTwo2{{ $count }}" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                      data-parent="#accordionEx">
                      <div class="card-body">
                         @foreach ($item->children as $child)
                          <a href="{{ route('category.island.list') }}?category={{ $child->id }}"
                          class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
                          <span>{{ $child->name }}</span>
                          </a>
                    @endforeach
                      </div>
                    </div>
<?php $count++; ?> 
                  @endforeach
                </div>
    
              </div>
              
            </div>
          </div>