Блог

У меня есть массив элементов, которые я использую в Laravel (в массиве половина — «родительские элементы», а половина — «дочерние элементы»)

Допустим, массив состоит из 30 элементов, по 15 каждого типа, я пытаюсь получить результат, в котором у меня будет один заголовок accordian с надписью «Родительские элементы» с 15 родительскими элементами под одним заголовком, затем один заголовок accordian для «дочерних элементов» с этими 15 под ним.

Однако с моим текущим кодом я получаю заголовок над каждым отдельным элементом.

Я понимаю, что это из-за foreach, но я в тупике от того, как именно достичь того, что я ищу, и я просто не могу обойти проблему заголовка над каждым элементом

Что я здесь делаю не так?

     @foreach($items as $item)
  
  @if($item['type'] == "Parent Item")
    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Main/Parent Items
            </button>
          </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            {{$item['Description']}}
          </div>
        </div>
      </div>
    </div>

  @elseif($item['type'] == "Child Item")
    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
              Sub/Child Items
            </button>
          </h2>
        </div>

        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            {{$item['Description']}}
          </div>
        </div>
      </div>
    </div>   
  @endif

@endforeach
  

Вам просто нужно сделать 2 цикла, т.е.:

 <div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Main/Parent Items
                </button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            @foreach($items as $item)
                @if($item['type'] == "Parent Item")
                    <div class="card-body">
                        {{$item['Description']}}
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

<div class="accordion" id="accordionExample2">
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                    Sub/Child Items
                </button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample2">
            @foreach($items as $item)
                @if($item['type'] == "Child Item")
                    <div class="card-body">
                        {{$item['Description']}}
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>
  

В качестве примечания, которое id="accordionExample" для обоих элементов недопустимо, они должны иметь уникальные идентификаторы.