Resizer to expand and minimize div

Question

I want to make 3 div side by side where each can expand to full screen when click a button while collapsing the other (but still show the title with vertical orientation). Something like CodePen did. Here is what it looks like in their page. Initially it shows 3 equal size div side by side. And when you double click the resizer on the side it will expand one div and collapse the other but the collapsed div not hidden entirely. I tried to inspect their page source and found this lines one code.

<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>

But I can't find any javascript or css for this behaviour. How can I achieve this? Is there any plugin from jQuery or Bootstrap for this kind of component? Or do I have to create from scratch?

Answer 1

You can start by doing your own minimal example like the below one that you can improve. I think its better than trying to reproduce a complex code like the codepen one:

It works on the hover but you can easily make it on click with some 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>