Javascript 扩展OnClick单个div并重新排列其余div

各位!！ 所以我想到的是一个div class=容器，其中包含两行3张卡

我正在使用bootstrap 4作为我的网格和布局。

卡片示例：

基本上，这4个元素同样是div，其中包含其他div，用于在顶部分发内容f.x，并使用and进行描述

我试图实现的功能是，当我点击任何一个S时，我点击的一个应该在中间进行扩展，当其他的移动到容器元素的左边或右边时，并调整到一个较小的尺寸（比如缩略图，但是很小）。 到目前为止，我已经尝试使用transform和translate进行扩展，但是我不知道如何混合和匹配这两种功能

我曾想过在以下步骤中使用几个JQuery函数： 1.Onclick-所选元素将展开，而所有其他元素都将通过JQuery进行.remove（）。 2.一旦它展开，其他元素将被附加到2个边上——假设容器中的2个div位于它的左端和右端。当然，追加操作是精确地添加到每一侧div。 3.假定发生的转换是另一个卡片元素缩略图消失，并在.append函数完成后显示

任何想法或对类似问题/任务的任何参考都会有很大帮助。

你可以使用，有一个叫做手风琴的组件，它的工作原理如下：

$（函数（）{
$（“#手风琴”）。手风琴（）；
});

卡1

卡片1的文本。。。

卡2

卡片2的文本。。。

您可以使用引导折叠组件和jQuery切换CSS类。例如

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').not(this).collapse("hide");
  $(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
  $(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});

$('.collapse').on('hide.bs.collapse', function () {
  $(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
  $(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});

然后随着类的变化添加一些CSS转换

.row > [class*="col"], img{
    transition: all .3s ease;
}

演示：

当然，你必须制作一些MOD才能完全按照你的要求来制作。
你也可以分享你的javascript吗？你能展示你所做的尝试，细化具体问题并展示呈现的HTML吗？是的，我知道这是一个手风琴，但这不是内容本身扩展的问题。这需要调整卡片的大小，并在其中一张卡片随内容展开后将其放置在容器的左右两侧。转换和翻译可能是必需的，但是如果可能的话，我也研究了JS。追加和。删除它们，并在单击标记后将完全不同的样式添加到标记中。
.row > [class*="col"], img{
    transition: all .3s ease;
}