ExpressionEngine channel entries loop to create accordion grid with Bootstrap

Question

I need to create an accordion grid using Bootstrap 4. Something like this:

I need to use a channel entries loop within ExpressionEngine to spit out each entry as a column and hide related content inside a collapsable div. When you click on a column, the extra content will reveal itself as a new row underneath its parent's row.

If I wasn't using an entries loop I would just create it like this:

<div class="row">

    <!-- Tiles -->

    <div class="col-4" trigger="#1"></div>
    <div class="col-4" trigger="#2"></div>
    <div class="col-4" trigger="#3"></div>

    <!-- Collapsable content -->

    <div id="1" class="col-12"></div>
    <div id="2" class="col-12"></div>
    <div id="3" class="col-12"></div>
</div>

But since I have a lot of entries I need to use an entries loop. How do I spit out the first 3 entries and then append the related content for each one after them in the same loop?

<div class="row">
    {exp:channel:entries
        channel="my_channel"
        }
        <div class="col-4" trigger="#{entry_id}"></div>
        <div id="{entry_id}" class="col-12"></div>
    {/exp:channel:entries}
</div>

I appreciate any help,

Thanks!

Answer 1

I had a similar layout problem, and was able to solve it using the Bootstrap ordering classes. Within each .row, force the "active" open collapsible div be the last in order (using order-last). This way the order in the markup won't matter, and you can create your loop with each collapsible div directly after its' trigger...

<div class="row">
    {exp:channel:entries
        channel="my_channel"
        }
        <div class="col-4" trigger="#{entry_id}"></div>
        <div id="{entry_id}" class="col-12 order-last"></div>
    {/exp:channel:entries}
</div>

Demo: https://www.codeply.com/go/6Yt0xSZdgu

---

Also see: Bootstrap grid with collapsed container in between?