Simple content change. Prev - Next Changes content

Just out of curiosity i wanted to make something similar to what pretty much every image slider plugin does.. just without the automatic changing of content. ( With any content inside the set div. )

Main functions would be:

1. Hide Prev if content is First. Hide Next if content is Last.
2. Change the content to previous or next when one of them are clicked.
3. Show Prev if content is anything but first. Show Next if content is anything but last.

Im having problems with hiding and showing Prev and Next. After "TEST3" content is visible and you press next it makes the content disappear, this is not desirable But if the hiding and showing of Prev and Next would work this wouldnt be a problem either.

Id like some help to get this code working more or less as it is. ( no matter how crappy the code is :D ) Some tips regarding crappyness of the code goes would be great though..

Edit: Right... heres the code :D http://jsfiddle.net/LKFt9/4/

JS:

$(".Content").hide();
$('.Content:first').addClass('Cont-active').show();
$('.Content:last').addClass('Cont-last');
$('.Content:first').addClass('Cont-first');

$('.Prev').click(function(){
    $('.Content:visible').prev().show().next().hide();
});
$('.Next').click(function(){
    $('.Content:visible').next().show().prev().hide();
});

    if( $('.Cont-first').is(':visible') ) {
        $('.Prev').hide();
    }
    else { $('.Prev').show(); }

    if( $('.Cont-last').is(':visible') ) {
        $('.Next').hide();
    }
    else { $('.Next').show(); }

HTML:

  <div class="Prev">Previous</div>
     <div class="Content">TEST</div>
    开发者_如何学编程 <div class="Content">TEST2</div>
     <div class="Content">TEST3</div>
  <div class="Next">Next</div>

It looks like you are assigning a class right at the beginning for Cont-active, although nothing seems to change or update that. However since nothing really seems to be using this, it's probably not important to fix.

It also seems that the hiding and revealing of your Prev/Next buttons is only done once, when the function first runs. You probably want these to run every time they are clicked. I would recommend wrapping these up in a function, and calling it on each click. Try this:

$(".Content").hide();
$('.Content:first').addClass('Cont-active').show();
$('.Content:last').addClass('Cont-last');
$('.Content:first').addClass('Cont-first');

refreshPaginators();  // needed so that the "Prev" button doesn't show when page first loads, since it isn't being hidden in any other way.

$('.Prev').click(function(){
    $('.Content:visible').prev().show().next().hide();
    refreshPaginators();
});
$('.Next').click(function(){
    $('.Content:visible').next().show().prev().hide();
    refreshPaginators();
});

// define a nice function for updating/refreshing the state of Prev/Next buttons which we will want to run anytime the content changes (and also when page first loads).
function refreshPaginators() {
    if( $('.Cont-first').is(':visible') ) {
        $('.Prev').hide();
    }
    else {
        $('.Prev').show();
    }
    if( $('.Cont-last').is(':visible') ) {
        $('.Next').hide();
    }
    else {
        $('.Next').show();
    }
}

Good luck!