How to change content with next and previous button?

Today, We want to share with you next and previous buttons in javascript with demo.In this post we will show you bootstrap dynamic pagination example, hear for how to implement pagination in html table using javascript? we will give you demo and example for implement.In this post, we will learn about pagination code in php HTML with an example.

Simple pagination with only next and previous buttons

HTML Code

    

        
First Options
        Product 

        Product
    
    

        
Second Options
        Product 

        Product
    
    

        
Third Options
        Product 

        Product
    
    Back
    Next


    
Congratulation! You are done!
    Edit Previous Options

jQuery Code

$('body').on('click', '.next', function() { 
    var id = $('.smartcard:visible').data('id');
    var nextId = $('.smartcard:visible').data('id')+1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+nextId+'"]').show();

    if($('.back:hidden').length == 1){
        $('.back').show();
    }

    if(nextId == 4){
        $('.smartcard-holder').hide();
        $('.end').show();
    }
});

$('body').on('click', '.back', function() { 
    var id = $('.smartcard:visible').data('id');
    var prevId = $('.smartcard:visible').data('id')-1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+prevId+'"]').show();

    if(prevId == 1){
        $('.back').hide();
    }    
});

$('body').on('click', '.edit-previous', function() { 
    $('.end').hide();
    $('.smartcard-holder').show();
    $('#smartcard-3').show();
});

Complete example to select next and prev element using Jquery

index.html

  
  
     
 
 


 
Jquery next() prev() functions
 

  

   
Laptop
   
Mobile
   
LCD
   
Iphone
   
Computer