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/

Answer 2

You can do it like this:

HTML:

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

JS:

$(document).ready(function() {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show(); // hide all divs except first
    $("button[name=next]").click(function() {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function() {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
});

jsfiddle

Answer 3

try something below if u want do it by your own. Set all divs to display:none initially except first. also in below code change maxdiv value based on number of divs you have (or find it in jquery itself if the number can change).

$(document).ready(function(){
var tracker = 1;
var maxdivs = 4;

$("#next").click(function(){
var divclass = ".cls" + tracker;
$(divclass).css("display","none");
tracker = tracker + 1;
if(tracker > maxdivs)
  tracker = 1;
divclass = ".cls" + tracker;
$(divclass).css("display","block");
});

$("#prev").click(function(){
 var divclass = ".cls" + tracker;
  $(divclass).css("display","none");
    tracker = tracker - 1;
  if(tracker < 1)
    tracker = maxdivs;
  divclass = ".cls" + tracker;
  $(divclass).css("display","block");
 });
 });

Answer 4

It sounds like a carousel what you want

Here are some examples: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

You can have a next and previous button to slide in a div and the old one slides out (or any other effect)

The carousels are not dependent on images it can be Divs filled with content.

edit: Bootstraps own carousel: http://twitter.github.io/bootstrap/javascript.html#carousel