title: Jquery toggle add z-index
body: <p>I'm trying to do what Toogle open up div test as the sample image:</p>
  
  <p><a href="https://i.stack.imgur.com/geAQa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/geAQa.png" alt="enter image description here"></a></p>
  
  <p>Css:</p>
  
  <pre><code>.area1 {
      width: 50px;
      height: 200px;
      background: red;
      display: inline-block;
      z-index:99;
  }
  .area2 {
      width: 50px;
      height: 200px;
      background: green;
      display: inline-block;
      z-index:99;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$("#Go2").click(function () {
      $(".area1").animate({width:'toggle'},350);
      $(".area2").hide();
  
  });
  $("#Go").click(function () {
      $(".area2").animate({width:'toggle'},350);
      $(".area1").hide();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gislef/kcve9qhg/" rel="nofollow noreferrer">http://jsfiddle.net/gislef/kcve9qhg/</a></p>
  
  <p>I trying usage z-index, but do not work</p>
  
  <hr>
  
  <p><strong>SOLUTION</strong></p>
  
  <p><a href="http://jsfiddle.net/gislef/kcve9qhg/6/" rel="nofollow noreferrer">http://jsfiddle.net/gislef/kcve9qhg/6/</a></p>
  
  <p>Thank you @D.Gramm</p>