title: How to hide/show div with javascript
body: <p>I want to achieve hide/show with div's in html but in this way.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="middle"&gt; 
  &lt;input type="button" id="button"/&gt;
  &lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this is my css:</p>
  
  <pre><code>body 
  { 
   height: 100%; 
   margin: 0; 
   padding: 0 ;
   border: 0 none;
  }
  #left
  {
  background-color:#EEEEEE;
  height:570px;
  width:73.9%;
  float:left;
  }
  #center
  {
  background-color:#D4EAE4;
  color:#535353;
  height:570px;
  width:15.25%;
  float:left;
  margin:0;
  }
  #right
  {
  background-color:#D4EAE4;
   float:left;
   width:11%;
   height:570px;
   margin:0;
  }
  </code></pre>
  
  <p>I want to do that when I click button on div <code>center</code> to hide div <code>right</code> and to expand div<code>left</code> for the size of the div <code>right</code> and then move div <code>center</code> all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
  Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:</p>
  
  <p>Start phase:
  <img src="https://i.stack.imgur.com/kcyBu.png" alt="Start phase"></p>
  
  <p>And end phase:
  <img src="https://i.stack.imgur.com/rqQvi.png" alt="enter image description here"></p>