title: Hide show divs one by one
body: <pre><code>.visible{display:block;}
  .hidden{display:none;}
  
  &lt;div class="section-container"&gt;      
      &lt;div id="sec_1" class="section visible"&gt;1&lt;/div&gt; &lt;!-- Should be visible always --&gt;
      &lt;div id="sec_2" class="section hidden"&gt;2&lt;/div&gt;
      &lt;div id="sec_3" class="section hidden"&gt;3&lt;/div&gt;
      &lt;div id="sec_4" class="section hidden"&gt;4&lt;/div&gt;
      &lt;div id="sec_5" class="section hidden"&gt;5&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type="button" id="show"&gt;Show&lt;button&gt;
  &lt;button type="button"  id="hide"&gt;Hide&lt;button&gt;
  
  jQuery(document).ready(function (){
     jQuery('#hide').click(function(){
       //Code
     });
     jQuery('#show').click(function(){
       //Code 
     });
  });
  </code></pre>
  
  <p>How to show <code>.section</code> divs one by one i.e second <code>.section</code> becomes visible on show button click and so on, but once hide button is clicked, last visible <code>.section</code> div should be hidden. But first <code>.section</code> div should never be hidden, it should be visible always.</p>