Javascript 如何使用可扩展的主div实现垂直滑动显示/隐藏div

我想使用引导实现一个类似以下图像的面板：

图01：处于完全状态的侧杆

左侧面板将有一个显示/隐藏按钮。 在隐藏时，它将向上滑动到其最小状态（图2）。 主div容器将增大大小并填充左侧的空白。 所有大小调整都需要使用过渡动画

图02：处于最小状态的侧杆

---

任何帮助/提示，如何实现这一点？

一种方法是使用

浮动
和
溢出：隐藏
：


.parent{
溢出：隐藏；
文本对齐：居中；
}
.小组{
浮动：左；
宽度：20%；
背景色：#EF66；
}
.导航{
浮动：对；
宽度：80%；
背景色：#EF66EF；
}
梅因先生{
溢出：隐藏；
宽度：自动；
清楚:对,；
背景色：#66EFEF；
}

侧板
航行
主要部分
一种方法是将
float
与
溢出：隐藏一起使用：


.parent{
溢出：隐藏；
文本对齐：居中；
}
.小组{
浮动：左；
宽度：20%；
背景色：#EF66；
}
.导航{
浮动：对；
宽度：80%；
背景色：#EF66EF；
}
梅因先生{
溢出：隐藏；
宽度：自动；
清楚:对,；
背景色：#66EFEF；
}

侧板
航行
主要部分
考虑到你没有展示到目前为止所取得的成果，我真的很难帮助你


HTML

<div class="container-fluid">
  <div class="header">
    <div class="col-xs-3 header-left">
      Hi
    </div>
  <div class="col-xs-9">
  </div>
</div>
<div class="app-body">
  <div class="col-xs-12 inner-body"></div>
</div>

从我给你的代码开始，你应该能够得到你想要的。但请记住，我的代码显示了向下滑动的状态。你必须添加动画和JS事件才能达到你想要的效果。
鉴于你没有展示到目前为止所取得的成果，我真的很难帮助你


HTML

<div class="container-fluid">
  <div class="header">
    <div class="col-xs-3 header-left">
      Hi
    </div>
  <div class="col-xs-9">
  </div>
</div>
<div class="app-body">
  <div class="col-xs-12 inner-body"></div>
</div>

从我给你的代码开始，你应该能够得到你想要的。但请记住，我的代码显示了向下滑动的状态。你必须添加动画和JS事件才能达到你想要的效果。
请分享你的尝试。请分享你的尝试。