Question

I have done next and prev button functionality. I need to make it so that what happens when I click on the next button, then the same thing happen reversely when clicking on the previous button.

Here I have worked fiddle Link: http://jsfiddle.net/thilakar/t8v5P/

$(function() {
    //var a = '.mainList';
    var a = 0;
    var b = 2;
    $('#next').click(function() {
        var x = 0;
        var z = $('.mainList').length;
        $('.mainList').each(function() {
            if(a == x){
                var inner_li = $('#'+a+' ul li').length;
                for( c=1; c<=inner_li; c++ ){
                    if (c == b) {
                        if ($('#'+a+'_'+c)) {
                            $('#'+a+'_'+c).show();
                        }
                    } else {
                            $('#'+a+'_'+c).hide();
                    }
                    if(b > inner_li) {
                        if (x < z-1) {
                            $('#'+a).hide();
                            a++;
                            $('#'+a).show();
                            b=1;
                        }
                    }
                }
            }
            x++;
        });
        b++;
    }); 

});

Please help me out.

Answer 1

here is the solution in pure jQuery way.

$('#next').click(function() {
        var activeLiId = $('li.mainList:visible').attr('id');

        if ($('li#'+activeLiId+' > ul > li:visible').next().length == 1) {
            $('li#'+activeLiId+' > ul > li:visible').hide().next().show();
        } else if ($('li.mainList:visible').next().length == 1) {
            $('li.mainList:visible').hide().next().show().find('ul > li:first').show();
        }

        if ($('li.mainList:visible').next().length == 0
            && $('li.mainList:visible').find('ul > li:visible').next().length == 0
        ) {
             $(this).attr('disabled', true);   
        } else {
            $('#prev').attr('disabled', false);
        }
    });

    $('#prev').click(function() {
        var activeLiId = $('li.mainList:visible').attr('id');

        if ($('li#'+activeLiId+' > ul > li:visible').prev().length == 1) {
            $('li#'+activeLiId+' > ul > li:visible').hide().prev().show();
        } else if ($('li.mainList:visible').prev().length == 1) {
            $('li.mainList:visible').hide().prev().show().find('ul > li:last').show();
        }

        if ($('li.mainList:visible').prev().length == 0
            && $('li.mainList:visible').find('ul > li:visible').prev().length == 0
        ) {
             $(this).attr('disabled', true);   
        } else {
            $('#next').attr('disabled', false);
        }
    }).attr('disabled', true);

Demo : http://jsfiddle.net/t8v5P/6/