Resizer扩展并最小化div

Question

我想并排制作3个div,每个可以在点击按钮时扩展到全屏,同时折叠另一个(但仍然以垂直方向显示标题).像CodePen那样的东西.这是他们页面中的样子. 最初它并排显示3个相同大小的div.当你双击侧面的缩放器时,它将展开一个div并折叠另一个但是折叠的div不会完全隐藏. 我试图检查他们的页面源代码,发现这行代码.

<div class="editor-resizer html-editor-resizer" title="Double-click to expand."></div>
<div id="box-html" class="box box-html" data-type="html">
   <div class="powers">
      <div class="powers-drag-handle" title="Double-click to expand."></div>
      <div class="editor-actions-left">
         <button id="settings-pane-html" class="button button-medium mini-button settings-nub" data-type="html" title="Open HTML Settings">
            <svg class="icon-gear" width="10" height="10">
               <use xlink:href="#gear"></use>
            </svg>
         </button>
         <h2 class="box-title html-editor-title" id="html-editor-title"><span class="box-title-name">HTML</span></h2>
      </div>
   </div>
   <div class="code-wrap">
      <pre id="html" class="code-box" aria-labeledby="html-editor-title">
         <code>

         </code>
      </pre>
      <div class="error-bar" id="error-bar-html">
         <span class="error-icon" data-type="html">
         !
         </span>
      </div>
   </div>
</div>

但我找不到任何javascript或css这种行为.我怎样才能做到这一点？是否有来自jQuery或Bootstrap的插件用于此类组件？或者我必须从头开始创作？

Answer 1

您可以从自己做一个最小的示例开始，如下所示，您可以对其进行改进。我认为它比尝试重现像 codepen 这样的复杂代码更好：

它适用于悬停，但您可以使用一些 JS 轻松地单击它

.container {
  display: flex;
  height: 200px;
}

.container>div {
  flex: 1;
  background: 
    linear-gradient(red, red) left/15px 100% no-repeat, 
    blue;
  padding-left: 15px;
  color: #fff;
  transition: 0.5s all;
}

.container:hover>div {
  min-width: 15px;
  padding: 0;
  flex: 0;
  writing-mode: vertical-lr;
}

.container>div:hover {
  flex: 1;
  padding-left: 15px;
  writing-mode: initial;
}

<div class="container">
  <div>HTML</div>
  <div>CSS</div>
  <div>JS</div>
</div>