使用jquery切换垂直调整包裹的div

我有一组正在动态构建的div，可以包含几行内容。我们将输出限制为每行三列。使用jquerytoggle切换div中的某些内容，我试图移动下面的每个div（以垂直方式），以允许读取切换的元素。我已尝试使用以下标记进行此操作：

<script type="text/javascript">
    $(".trigger").click(function () {
        var trigger = $(this);
        $(this).next(".toggle").slideToggle();

    });
</script>
<div id="toggleContainer">
    <div>
        <h3 class="trigger">Trigger 1</h3> 
        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 2</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 3</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 4</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 5</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 6</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 7</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 8</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 9</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
</div>

$（“.trigger”）。单击（函数（）{
var触发器=$（此）；
$（this）.next（“.toggle”）.slideToggle（）；
});
触发1

第一行
第二行
第三行

触发2

第一行
第二行
第三行

触发3

第一行
第二行
第三行

触发4

第一行
第二行
第三行

触发5

第一行
第二行
第三行

触发6

第一行
第二行
第三行

触发7

第一行
第二行
第三行

触发8

第一行
第二行
第三行

触发9

第一行
第二行
第三行

还有，用小提琴来演示

这是将下面的每个元素向右移动，以允许查看切换的内容。我的问题是：如何在不向右移动行的情况下将内容向下移动到下一行？以下是我试图实现的一个示例：

A1 A2 A3

B1 B2 B3

C1 C2 C3

点击A1，B1和C1的状态为：

A1 A2 A3

A1B2 B3

B1 C2 C3

C1

---

如果你想将内容重叠到下一行，你可以<代码>位置：绝对< /代码>该类切换并增加<代码> z索引< /代码>相应地

你可以简单地考虑你排列内容的方式。您可以将它们垂直排列，而不是水平排列，因此您可以使用如下方式：

$（“.trigger”）。单击（函数（）{
var触发器=$（此）；
$（this）.next（“.toggle”）.slideToggle（）；
});
div#切换容器{
宽度：100%；
显示器：flex；
对正内容：空间均匀；
}
部门内容{
弹性：0.33%；
}
h3{
字号：2em；
位置：相对位置；
光标：指针；
}
.切换{
显示：无；
}

触发1

第一行
第二行
第三行

触发4

第一行
第二行
第三行

触发7

第一行
第二行
第三行

触发2

第一行
第二行
第三行

触发5

第一行
第二行
第三行

触发8

第一行
第二行
第三行

触发3

第一行
第二行
第三行

触发6

第一行
第二行
第三行

触发9

第一行
第二行
第三行

很抱歉我不够清晰。我希望将受影响的柱向下移动，而不是向右移动。这可能吗？我在切换列表中使用了position:absoluteadjustment，但它与下面的内容重叠（我试图避免）。