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!
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?
来源:https://stackoverflow.com/questions/49317530/expressionengine-channel-entries-loop-to-create-accordion-grid-with-bootstrap