I have three content boxes that i want to show and hide using controls.
The HTML is as follows:

```
<div id="leermat1"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>
<div id="leermat2"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>
<div id="leermat3"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>

```

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:

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. 

Also the 'pag-prev' should work the same way.

I started with the following but dont know where to go from here.

```
$(document).ready(function() {
    $('.pag-next').on('click',function() {
        $('#leermat1').addClass('hide');
        $('#leermat2').addClass('show');
    });
});

```

One more thing is that the '.pag-next' should stop functioning after it has shown #leermat3.