I have a definition list with a lot of text inside of it. When a user comes to the page, I want the jQuery to hide two thirds of that content, add a next and previous button where appropriate, and fade the content in and out. The first third of the content is .issue-group-1, the second third is .issue-group-3, the third, .issue-group-3.

I am trying to set it so that when the user hits the next button, the next button changes classes, and thus acts differently the next time the user clicks it (that is, it takes them to the third page instead of the second.

Right now, the next/previous buttons are working on the first and second "pages" but the next button to the third page won't work.

My code is probably too long and this is maybe not the best way to do it--I'm new to jquery. Any suggestions would be helpful.

$(document).ready(function(){
    $('.issue-group-2, .issue-group-3').hide();
    $('a#next-button.page1').fadeIn(500);
    $('a#next-button.page1').click(function() {
        $(this).removeClass('page1').addClass('page2');
        $('.issue-group-1').fadeOut(500, function() {
            $('.issue-group-2').fadeIn(500);
        });
        $('a#previous-button').fadeIn(500);
    });
    $('a#previous-button.page2').click(function() {
        $('#next-button.page2').removeClass('page2').addClass('page1');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-1').fadeIn(500);
        });
        $('a#previous-button').fadeOut(500);
    });
    $('a#next-button.page2').click(function() {
        $('a#previous-button').removeClass('page2').addClass('page3');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-3').fadeIn(500);
        });
        $('a#next-button').fadeOut(500);
    });
    $('a#previous-button.page3').click(function() {
        $(this).removeClass('page3').addClass('page2');
        $('.issue-group-2').fadeOut(500, function() {
            $('.issue-group-2').fadeIn(500);
        });
        $('a#next-button').fadeIn(500);
    });
});