ExpressionEngine channel entries loop to create accordion grid with Bootstrap

半城伤御伤魂 提交于 2019-12-02 08:22:04

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?

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