CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Alex Zahir
Alex Zahir

Reputation: 969

Show/Hide Content without reloading the page

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.

Upvotes: 0

Views: 1262

Answers (3)

Alex Zahir
Alex Zahir

Reputation: 969

This is what worked for me through a little trial and error. Although I am not sure if this is the most efficient solution.

         $('#leermat1 .pag-next').on('click',function(){
            $('#leermat1').addClass('hide');
            $('#leermat1').removeClass('show');
            $('#leermat3').addClass('hide');
            $('#leermat3').remove('show');
            $('#leermat2').addClass('show');    
        });
        $('#leermat2 .pag-next').on('click',function(){
            $('#leermat1').removeClass('show');
            $('#leermat2').addClass('hide');
            $('#leermat2').removeClass('show');
            $('#leermat3').addClass('show');
        });

        $('#leermat2 .pag-prev').on('click',function(){
            $('#leermat2').addClass('hide');
            $('#leermat2').removeClass('show');
            $('#leermat1').addClass('show');
            $('#leermat3').removeClass('show');
        });
        $('#leermat3 .pag-prev').on('click',function(){
            $('#leermat3').addClass('hide');
            $('#leermat2').addClass('show');
            $('#leermat1').addClass('hide');
            $('#leermat3').removeClass('show');
            $('#leermat1').removeClass('show');
        });

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59262

You need this

$('[class^=pag-]').click(function() {
    var elem = $('[id^=leermat]').filter(":visible"); // take the visible element
    var num = Number(elem[0].id.match(/\d+$/)[0]); // take the number from it
    var step = $(this).is('.pag-next') ? 1 : -1; // ternary operator
    $('#leermat'+ (num + step)).show(); // show next or back
    elem.hide(); // hide the visible element
});

Upvotes: 1

LiamWilson94
LiamWilson94

Reputation: 458

Looks like in your anchor tag you have not given it a class. 

<a href="pag-next">Next</a>

You then go on in your JQuery code to add a click function to a class which does not exist.

 $('.pag-next').on('click',function()

Try adding class="pag-next" to your anchor tag.

Upvotes: 0

Related Questions