Javascript 单击“在其他div上最大化div”

我想最大化div而不是最小化其他div的内容。我的意思是内容保持不变，因为它不是最小化的

我在试这个

 <div id="content">
    <div id="containerleft">
       <div id="box1" class="box">im left the content here to see if it minimized</div>
       <div id="box2" class="box">im middle the content here to see if it minimized</div>
       <div id="box3" class="box">im right the content here to see if it minimized</div>
    </div>
 </div>

<>这与中间的div完全一致，而不是在其他div上。

例如，如果我单击right div，我希望该div在其位置最大化，而其他div在左侧最小化

如果我点击left div，另一个将最小化到右边

中间的div运行良好，它在其位置上显示。 我希望每个部门都能在指定的地方出现。右边显示在右边，左边显示在左边，中间显示在中间

这是你的电话号码

谢谢你的支持

---

如果用css修复它会更好。

以下是使用css的方法

$（“.box”）。在（'click'，function（）上{
$（“.box”）.removeClass（'active'）；
$（this.addClass（'active'）；
});
#内容{
宽度：450px；
高度：150像素；
显示器：flex；
}
.盒子{
-ms-flex:1；
弹性：1；
位置：相对位置；
过渡：全部3秒；
溢出：隐藏；
}
.box>div{
位置：绝对位置；
左：0；
最大宽度：150px；
排名：0；
宽度：钙（450px-40%）；
填充：15px；
}
.box.active{
-ms-flex:160%；
弹性：160%；
}
#框1{
背景：粉红色；
}
#框2{
背景：灰色；
}
#框3{
背景：绿色；
}

我在这里的权利的内容，看看它是否最小化
我在这里的权利的内容，看看它是否最小化
我在这里的权利的内容，看看它是否最小化
这有点变化，但可能会对你有所帮助。@KIMB technologies是的，动画是正确的，但他们最小化的内容，我不希望内容最小化，就像div过来一样。正如我对KIMB说的，内容最小化了，我希望最小化的div的内容保持原样，这意味着最大化的div覆盖了它们。@ScooterDaraf已编辑，内容宽度现在保持不变。接近预期结果：），但仍然有问题。单击内容之前，如果内容未完全显示，则会将其隐藏一半。我希望它们在整个div中显示，当点击其他div时，它就像跳过它一样，恰好在我中间的小提琴中。好的，我从你的代码中修正了，我必须加上最大宽度：150 px；在.box>div中，我编辑您的代码并添加它，如果您介意的话。非常感谢您的帮助。
   $(".box").click(function(){

var clone = $(this).clone().addClass('active');
var parent = $(this).parent();
var pos = $(this).position();

$(this).append(clone);

console.log(pos);

clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
    width: '80%', 
    height : '50%',
    top: 0,
    left: '10%'
},300);


});