javascript - Sliding div off-screen -

i’m having little trouble template: basically, i’m trying add functionality if click box expand sliding other ones off-screen, instead sliding div off-screen it’s disappearing completely.

here have far: jsfiddle.

$(function() {    $(".box").click(function() {      var isopened = $(this).attr("isopen");      if (isopened == "true") {        $(this).css("position", "relative").css("width", $(this).attr("data-ow"));        $(this).attr("isopen", "false");      }      else {        $(this).attr("data-ow", $(this).css("width"));        $(this).css("position", "relative").css("width", "40%");        $(this).attr("isopen", "true");      }    });  });

* {    margin: 0;    padding: 0;  }  .container {    width: 100%;    max-width: 100%;    max-height: 600px;    overflow: hidden;  }  .box {    height: 600px;    display: block;    width: 13.33333333%;    border: 1px solid white;    background-color: black;    float: right;    position: relative;  }  .box:first-of-type {    width: 29.0%;    background-color: orange;  }  .box:last-of-type {    width: 29.0%;    background-color: blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="container">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>

what want when 1 of boxes clicked expands , instead of entire div being hidden part off-screen hidden:

i think might flexbox solution can want without usign jquery/js. pure css , html:

body {    background-color: black  }  #container {    display: flex;    width: 100%;    height: 50vh;  }  #container > div {    flex: 1;    min-width: 0;    transition:min-width 0.2s ease;    outline:0;  }  #container > div:focus {    min-width: 50vw;  }

<div id="container">    <div tabindex="0" style="background-color:blue"></div>    <div tabindex="0" style="background-color:orange"></div>    <div tabindex="0" style="background-color:green"></div>    <div tabindex="0" style="background-color:white"></div>    <div tabindex="0" style="background-color:blue"></div>  </div>

i used tabindex give me ability use :focus selector.