show hide divs using Next Previous button using jQuery?

Question

for e.g i have 10 <div>, i want to show each <div> on next button click & show previous <div> on previous button click. how to do it using jQuery?

Answer 1

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

This is a very simple HTML example.

With a simple jQuery code like this one:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

For further explanations: The first block will hide every div except first one (e is a counter in each function of jQuery).

The two other blocks handle the click on the buttons. We are looking for the visible div and on click we are display next (see next() function of jquery or previous div (prev() function of jquery).

If there is no next div (on next button click) we are hiding the visible div and displaying the first one.

Online example here: http://jsfiddle.net/hsJbu/