Show hide divs using Next Previous button using jQuery?

Question

for example, I have 10 <div> , I want to show each <div> next time I click the button and show the previous <div> previous time I click the button. 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.

Using simple jQuery code like this:

 $(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 explanation: The first block will hide every div except the first (e is a counter in every jQuery function).

The other two blocks handle the click of the buttons. We are looking for a visible div and by clicking we show the following (see next () jquery function or previous div (prev () jquery function).

If there is no next div (the next time the button is pressed), we hide the visible div and display the first.

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

Answer 2

You can do it as follows:

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

Sounds like a carousel, what do you want

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

You can have the next and previous buttons to go into the div, and the old part - (or any other effect)

Carousels are independent of images, which may be Divs filled with content.

Good luck and have a nice day

edit: Bootstraps own carousel: http://twitter.imtqy.com/bootstrap/javascript.html#carousel

Answer 4

try something below if you want to do it yourself. Set all divs to display: none initially except the first. also in the lower value of maxdiv code based on the 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"); }); });