ExpressionEngine通道条目循环以使用Bootstrap创建折叠网格

Question

我需要使用Bootstrap 4创建一个手风琴网格。像这样：

我需要在ExpressionEngine中使用通道条目循环将每个条目作为列吐出并隐藏可折叠div中的相关内容。当您单击某列时，额外内容会将其自身显示为其父行下面的新行。

如果我没有使用条目循环，我会像这样创建它：

<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>

但是由于我有很多条目，我需要使用条目循环。如何吐出前3个条目，然后在同一个循环中为每个条目后面附加相关内容？

<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>

我感谢任何帮助，

谢谢！

Answer 1

我有类似的布局问题，并且能够使用Bootstrap 排序类来解决它。在每个.row内强制执行＆＃34; active＆＃34; open collapsible div是最后的顺序（使用order-last）。通过这种方式，标记中的顺序无关紧要，您可以直接在每个可折叠div之后创建循环。触发...

<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>

演示：https://www.codeply.com/go/6Yt0xSZdgu

另请参阅：Bootstrap grid with collapsed container in between？