show hide divs using Next Previous button 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

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.

Good luck & Have a nice day

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

Answer 4

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");
 });
 });