Grouping items under accordian header in laravel - php

Question

I have an array of items that I'm using in Laravel (in the array, half are "parent items" and half are "child Items")
Say the array is 30 items, 15 of each type, I'm trying to get a result where I would have a single accordian header that says "Parent items" with the 15 parent items under the single header, then a single accordian header for the "Child items" with those 15 under it.
However, with my current code I'm getting the header over each individual item.
I understand this is because of the foreach, but I'm stumped on how exactly to achieve what I'm looking for and I just can't seem to get around the issue of the header over each item
What am I doing wrong here?
#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

Answer 1

You'll just need to do 2 loops, ie:
<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>
As a side note that id="accordionExample" on both elements is invalid, those should have unique ids.