How to change content with next and previous button at same page

Question

I'm trying to get a scenario at where some portion of full contents can be seen. To see the other portion, user have to click the next button. They'll also can go back by back button. It might be little bit easy if next and previous links are stayed at all the partial content so that each content's link can be kept at the next and previous links. But, unfortunately, I have to keep next and previous button outside of each contents. Anyway, I can make the next button working so far. But, I can't make back button working. Also, I'm realizing that, it's not the correct way. Because, I've made the button working based on the how many time clicking on the button. If clicked once, show the content-1, if clicked for second time, show the content-2 and so on. But, when previous button will work, then making relation with content and click counting may not work properly. So, what's the best way to handle this scenario by jQuery?

So far, my work

Answer 1

Why not have all different "contents" in a list and just let JS to take care of everything else. That way, adding and removing content is very simple and only involves editing HTML and not JS code. Here's a Fiddle.

---

HTML:

<ul id="content">
    <li>
        <p>First Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Second Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Third Options</p>
        <input type="checkbox" />Item
        <br />
        <input type="checkbox" />Item
    </li>

    <li>
        <p>Congratulation! You are done!</p>
    </li>
</ul>

---

JS:

var content = $('#content');
content.css('list-style-type', 'none');
content.wrap('<div id="wrapper"></div>');

var wrapper = $('#wrapper');
wrapper.append('<button id="previous">Previous</button><button id="next">Next</button>');

$('#previous').hide();

var liElements = content.children();
liElements.hide();
liElements.first().show();

var liElementCount = liElements.length;

if (liElementCount > 0) {
    var counter = 0;

    function swapContent() {
        if (counter == 0) {
            $('#previous').hide();
        } else {
            $('#previous').show();
        }

        if (counter == liElementCount - 1) {
            $('#next').hide();
        } else {
            $('#next').show();
        }

        liElements.hide();
        $(liElements.get(counter)).show();
    }

    $('#next').click(function () {
        counter++;
        swapContent();
    });

    $('#previous').click(function () {
        counter--;
        swapContent();
    });
}

Answer 2

Try This - Working Demo Here

var counter = 1;
$('body').on('click', '.next', function() { 
    $('.content').hide();

    counter++;
    $('#content-'+counter+'').show();

    if(counter > 1) {
        $('.back').show();
    };
    if(counter > 3) {
        $('.content-holder').hide();
        $('.end').show();
    };

});

$('body').on('click', '.back', function() { 
    //alert(counter);
    counter--;
    $('.content').hide();
    var id = counter;    
    $('#content-'+id).show();
    if(counter<2){
            $('.back').hide();
    }


});

$('body').on('click', '.edit-previous', function() {  // UPDATED CODE
    $('.end').hide();
    $('.content-holder').show();
    $('#content-3').show();
    counter--;  // issue resolved of click twice
});

Working JSFiddle Demo - Click

See the Updated Answer Here

Answer 3

What about this

HTML

<div class="content-holder">
    <div class="content" id="content-1" data-id='1' style="display: block;">
        <p>First Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <div class="content" id="content-2" data-id='2'>
        <p>Second Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <div class="content" id="content-3" data-id='3'>
        <p>Third Options</p>
        <input type="checkbox" />Item <br />
        <input type="checkbox" />Item
    </div>
    <button type="button" class="back">Back</button>
    <button type="button" class="next">Next</button>
</div>
<div class="end" data-id='4'>
    <p>Congratulation! You are done!</p>
    <button type="button" class="edit-previous">Edit Previous Options</button>
</div>

Javascript

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

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

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

$('body').on('click', '.back', function() { 
    var id = $('.content:visible').data('id');
    var prevId = $('.content: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();
    $('.content-holder').show();
    $('#content-3').show();
});

Fiddle