ExpressionEngine channel entries loop to create accordion grid with Bootstrap

喜欢而已 提交于 2019-12-02 08:14:20

问题


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!


回答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?



来源:https://stackoverflow.com/questions/49317530/expressionengine-channel-entries-loop-to-create-accordion-grid-with-bootstrap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!