Javascript 相同的选择器单击添加和删除

我喜欢一次一个地在同一个地方获取不同的内容。 因此，当用户单击“选择我1”时，将打开Lorem ipsum 1，如果他单击“选择我3”，代码将从Content1框中删除显示块

这是我的DOM和

---

我正在使用TweenMax制作这个动画。

为什么不在动画之前隐藏所有

.box

元素：

---

如何准确地设置

显示

样式的动画？

<div id="contentContainer">
<div class="box" id="content1box">
    <p>Lorem ipsum 1</p>
</div>
<div class="box" id="content2box">
    <p>Lorem ipsum 2</p>
</div>
<div class="box" id="content3box">
    <p>Lorem ipsum 3</p>
</div>
</div>

<div id="contentSelection">
<div class="contentSelect" id="content1">
    <p>Select me 1</p>
</div>
<div class="contentSelect" id="content2">
    <p>Select me 2</p>
</div>
<div class="contentSelect" id="content3">
    <p>Select me 3</p>
</div>
</div>

$('#contentSelection .contentSelect').on('click',function(){
TweenMax.to(("#"+ $(this).attr('id') + "box"), 0.5, {display: "block", delay:0.5}); });

$('#contentSelection .contentSelect').on('click', function () {
    $('#contentContainer .box').hide();
    TweenMax.to(("#" + $(this).attr('id') + "box"), 0.5, { display: "block", delay: 0.5 });
});