title: Show and hide based on time interval
body: <p>I want to show and hide a series of <code>div</code>s based on time interval.</p>
  
  <p>Show div 1 after 4 seconds, show div 2 after a further 4 seconds and so on.</p>
  
  <p>The previous <code>div</code> being hidden, so it appears as if new information is replacing the previous and at time intervals.</p>
  
  <p>I have it working to a point, it's just when I add more <code>div</code>s.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval(function() {
    $("#a").hide();
    setTimeout(function() {
      $("#b").fadeIn('normal');
    });
  }, 4000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#b, #c {
    display: none
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="a"&gt;1&lt;/div&gt;
  &lt;div id="b"&gt;2&lt;/div&gt;
  &lt;div id="c"&gt;3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/Layt8cuy/1/" rel="nofollow noreferrer">https://jsfiddle.net/Layt8cuy/1/</a></p>
  
  <p>The first <code>div</code> needs to be there by default, and they stop with the last <code>div</code> with no loop back to the beginning.</p>