title: Make an overlapped div animate to the front after clicking a button
body: <p>This is my jsfiddle: <a href="https://jsfiddle.net/93ce0mkt/" rel="nofollow">https://jsfiddle.net/93ce0mkt/</a></p>
  
  <p>I am trying to make whichever div is clicked animates to the front. </p>
  
  <p>I.e. if the 5th div is called, then the 3rd div is called, the 3rd div is able to be read despite coming before the 5th div.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Hip-Hop Manifesto&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="final.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;
  
      &lt;/script&gt;
      &lt;script src="final.js"&gt;&lt;/script&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div class="navigation"&gt;    &lt;span id="div1" class="alink"&gt;The Beginning &lt;strong&gt;|&lt;/strong&gt;  &lt;/span&gt;     &lt;span id="div2" class="alink"&gt;New School Hip-Hop &lt;strong&gt;|&lt;/strong&gt; &lt;/span&gt;
  &lt;span id="div3" class="alink"&gt;The Golden Age &lt;strong&gt;|&lt;/strong&gt; &lt;/span&gt;
  &lt;span id="div4" class="alink"&gt;Gangsta Rap  &lt;strong&gt;|&lt;/strong&gt; &lt;/span&gt;
  &lt;span id="div5" class="alink"&gt;90s Hip-Hop  &lt;strong&gt;|&lt;/strong&gt;&lt;/span&gt;
  &lt;span id="div6" class="alink"&gt;Early 2000s Hip-Hop  &lt;strong&gt;|&lt;/strong&gt; &lt;/span&gt;
  &lt;span id="div7" class="alink"&gt;Today in Hip-Hop  &lt;strong&gt;|&lt;/strong&gt; &lt;/span&gt;
  &lt;span id="div8" class="alink"&gt;The Future&lt;/span&gt;
  
          &lt;/div&gt;
          &lt;div class="title3"&gt;Hip-Hop&lt;/div&gt;
          &lt;div id="experiment" class="contentdiv"&gt;
              &lt;p&gt;Info 1&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment1" class="contentdiv2"&gt;
              &lt;p&gt;Info 2&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment2" class="contentdiv"&gt;
              &lt;p&gt;Info 3&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment3" class="contentdiv2"&gt;
              &lt;p&gt;Info 4&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment4" class="contentdiv"&gt;
              &lt;p&gt;Info 5&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment5" class="contentdiv2"&gt;
              &lt;p&gt;Info 6&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment6" class="contentdiv"&gt;
              &lt;p&gt;Info 7&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="experiment7" class="contentdiv2"&gt;
              &lt;p&gt;Info 8&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>    body{
      background-color: #201C1D;
      margin: auto;
      overflow-x: hidden;
      color: white;
  }
  
  #container{
  
  }
  .title {
      font-family: "Impact";
      font-size: 120px;
      text-align: center;
      position: absolute;
      top: 80px;
      width: 465px;
      left: 680px;
      border-style: solid;
      padding: 20px;
      letter-spacing: -5px;
  
  
  }
  .title2 {
  
      font-size: 30px;
      text-align: center;
      position: relative;
      top: 350px;
      left: 0px;
      font-family: 'Roboto Condensed', sans-serif;
      line-height: 180%;
  }
  .title3{
      font-family: "Impact";
      font-size: 40px;
      text-align: center;
      position: absolute;
      top: 40px;
      width: 116px;
      left: 895px;
      border-style: solid;
      padding: 20px;
      letter-spacing: -2px;
  }
  .navigation{
      text-align: center;
      font-size: 20px;
      position: absolute;
      left: 400px;
      top: 170px;
      font-family: 'Roboto Condensed', sans-serif;
  }
  #experiment{
      background-color: black;
      border-style: solid;
      z-index: 100%;
  
  }
  #experiment1{
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment2 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment3 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment4 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment5 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment6 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  #experiment7 {
      background-color: black;
      border-style: solid;
      border-color: white;
  }
  .contentdiv {
      width: 700px;
      height: 500px;
      top: 320px;
      color: white;
      font-size: 16px;
      font-family: sans-serif;
      padding: 15px;
      position: absolute;
      text-align: center;
      left: -1100px;
      font-family: 'Raleway', sans-serif;
      line-height: 200%;
  }
  .contentdiv2 {
      width: 700px;
      height: 500px;
      top: 320px;
      color: white;
      font-size: 16px;
      font-family: sans-serif;
      padding: 15px;
      position: absolute;
      text-align: center;
      left: 2000px;
      font-family: 'Raleway', sans-serif;
      line-height: 200%;
  }
  .contentdivauto {
      width: 700px;
      height: auto;
      top: 320px;
      color: white;
      font-size: 16px;
      font-family: sans-serif;
      padding: 15px;
      position: absolute;
      text-align: center;
      left: 2000px;
      font-family: 'Raleway', sans-serif;
      line-height: 220%;
  }
  .alink:hover {
      cursor: pointer;
      font-size: 23px;
  
  
  }
  a:hover{
      text-decoration:none;
      color: white;
  }
  a:link{
      text-decoration: none;
      color: white;
  }
  a:visited{
      text-decoration: none;
      color: white;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function () {
  $("#div1").click(function () {
      $(".contentdiv").css("left", "-1400px");
      $("#experiment").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div2").click(function () {
      $(".contentdiv2").css("left", "2000px");
      $("#experiment1").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div3").click(function () {
      $(".contentdiv").css("left", "-1400px");
      $("#experiment2").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div4").click(function () {
      $(".contentdiv2").css("left", "2000px");
      $("#experiment3").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div5").click(function () {
      $(".contentdiv").css("left", "-1400px");
      $("#experiment4").animate({
          "left": "600px"
      }, 1000);
  
  });
  $("#div6").click(function () {
      $(".contentdiv2").css("left", "2000px");
      $("#experiment5").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div7").click(function () {
      $(".contentdiv").css("left", "-1800px");
      $("#experiment6").animate({
          "left": "600px"
      }, 1000);
  });
  
  $("#div8").click(function () {
      $(".contentdiv2").css("left", "2000px");
      $("#experiment7").animate({
          "left": "600px"
      }, 1000);
  });
  </code></pre>