Javascript 在响应网格中使用滑动切换时，如何防止其他div移动？

我有一个响应网格，在桌面/平板电脑上，每行有3列。所述列中的每个div都有隐藏内容，当使用slideToggle单击按钮时，这些内容可以垂直展开。我只希望它下面的那个div，它碰到的那个div，向下移动。但是，它下面的整行向下移动

这是我的小提琴&我正在使用的JS：

如果单击第一行中的第三项，您将看到div展开，但我只希望它直接向下推div，而不是整行。有什么想法吗

另外，这是在Wordpress中，所以所有额外的div&这些都是使用我正在使用的网格生成器放在那里的。我对他们没有太多的灵活性

---

非常感谢您的帮助

rnevius的评论是正确的，他说您不能用当前的系统这样做

你可以试试CSS列之类的东西。但是，除了最新的浏览器版本之外，它对其他任何东西都是参差不齐的

下面的代码片段演示了CSS列

$（“.slidetoggle”）。单击（函数（）{
$（this.parent（）.parent（）.find（“.av_inner_wrapper”）.slideToggle（）；
});
.wrapper{
宽度：100%；
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
-webkit列宽：33%；/*Chrome、Safari、Opera*/
-moz列宽：33%；/*Firefox*/
列宽：33%；
-webkit列间距：0；/*Chrome、Safari、Opera*/
-moz列间距：0；/*Firefox*/
列间距：0；
}
.三分之一{
宽度：100%；
填充物：5px；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
-webkit列内部中断：避免；
-莫兹柱内折：避免；
-o-柱-内部破裂：避免；
-ms列内部中断：避免；列内部中断：避免；
显示：内联块；
溢出：自动；
}
.av_内包装{
显示：无；
}

标题1
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
标题2
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
标题3
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
标题4
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
标题5
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
标题6
这句话的意思是：“我不知道你是怎么想的。”

CTA
点击幻灯片
您不能使用当前的网格。您需要使用基于列的布局（而不是基于行），或者使用JS绝对定位所有元素。谢谢！这很有帮助。幸运的是，我不需要支持较旧的浏览器：）@LindseyS-我很高兴这可以帮助你。如果此答案最终解决了您的问题，请将其标记为已接受，以便其他人不会花费时间尝试解决已解决的问题。
$( ".slidetoggle" ).click(function() {
  $(this).parent().parent().find( ".av_inner_wrapper" ).slideToggle();
});