Javascript 展开和折叠多个缩略图

嗨，我的第一个问题在这里，所以请善良！ 我正在试验切换扩展和折叠div，我想知道如何使顶部的3个缩略图在每个缩略图扩展时都保持在那里？第三个缩略图工作正常，另两个将缩略图拖动到展开的图像下

$（“.header”）。单击（函数（）{
$header=$（此）；
//获取下一个元素
$content=$header.next（）；
//打开所需内容-切换幻灯片-如果可见，向上滑动，如果不向下滑动。
$content.slideToggle（500，函数（）{
//滑动切换完成后执行此操作
//根据内容div的可见性更改标题文本
$header.text（函数（）{
//根据条件更改文本
返回$content.is（“：visible”）？“Collapse”：“Expand”；
});
});
});
.row{
宽度：50%；
高度：300px；
背景色：红色；
}
.集装箱{
宽度：100%；
边框：1px实心#D3；
}
.货柜组{
宽度：100%；
}
.容器.标题{
背景色：#D3；
填充：2px；
光标：指针；
字体大小：粗体；
}
.行{
边缘顶部：20px；
}
.容器.内容{
显示：无；
填充物：5px；
}
.content-p{
宽度：70%；
浮动：对；
右边填充：20px；
文本对齐：对齐；
}

1Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
2lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
3Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
问题在于您将
内容放置在错误的位置。您应该有一个容器，其中较小的缩略图被分组，然后在第一个容器下面有另一个容器，其中包含较大的内容

然后，您必须更改javascript，因此不必使用
.next（）
，您应该找到一种不同的方法将每个缩略图与其更大版本链接起来。
谢谢，我只使用了一个缩略图就可以很好地工作。我只是想让我的头脑在添加很多。我会重新考虑布局