CODEWITHSUNDEEP
jquery
Jay
Jay

Reputation: 3393

show hide divs using Next Previous button using jQuery?

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?

Upvotes: 12

Views: 61227

Answers (4)

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

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

Upvotes: 1

Stano
Stano

Reputation: 8939

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

Upvotes: 10

Louis XIV
Louis XIV

Reputation: 2224

<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/

Upvotes: 21

Nitin Agrawal
Nitin Agrawal

Reputation: 1361

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

Upvotes: 1

Related Questions