title: Show/Hide Content without reloading the page
body: <p>I have three content boxes that i want to show and hide using controls.
  The HTML is as follows:</p>
  
  <pre><code>&lt;div id="leermat1"&gt; 
    Content here 
    &lt;a class="pag-next"&gt;Next&lt;/a&gt;
   &lt;a class="pag-prev"&gt;Previous&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="leermat2"&gt; 
    Content here 
    &lt;a class="pag-next"&gt;Next&lt;/a&gt;
   &lt;a class="pag-prev"&gt;Previous&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="leermat3"&gt; 
    Content here 
    &lt;a class="pag-next"&gt;Next&lt;/a&gt;
   &lt;a class="pag-prev"&gt;Previous&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the two anchors pag-next and pag-prev that will control which of  the content divs should be visible at any given point:</p>
  
  <p>I want to write jquery such as, when #leermat1 'pag-next' is clicked, it hides #leermat1 and shows #leermat2. Then when #leermat1 is hidden and #leermat2 shows, when '.pag-next' is clicked, it hides #leermat2, and shows #leermat3. </p>
  
  <p>Also the 'pag-prev' should work the same way.</p>
  
  <p>I started with the following but dont know where to go from here.</p>
  
  <pre><code>$(document).ready(function() {
      $('.pag-next').on('click',function() {
          $('#leermat1').addClass('hide');
          $('#leermat2').addClass('show');
      });
  });
  </code></pre>
  
  <p>One more thing is that the '.pag-next' should stop functioning after it has shown #leermat3.</p>