Jquery : How To Show The Next Div And Hide The Present One

I need to hide the present div and show next hide here is my codes ​DEMO

Solution 1:

Look at this. Handles start/end using css classes, kept js simple.

Solution 2:

What about something like this?

$(document).ready(function() { 

  var currentDiv = 0;
  $('#next').click(function() {
    $('#div' + (currentDiv + 1)).hide();
    currentDiv = (currentDiv + 1) % 3;
    $('#div' + (currentDiv + 1)).show();
  });
});

Solution 3:

try something a little different

$(document).ready(function() { 

    $('#next').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('#main div')[0].show();
          }

    });

    $('#prev').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.previous().length>0){
              $eL.previous().show();
          }else{
               $('#main div')[$('#main div').length - 1].show();
          }

    });

});

edit: this function assumes one of the child divs is already visible when the page loads.

edit: added for previous button

Solution 4:

Something like this (next and previous handled):

.item{
    display:none;
}​


var activeItem = 0;

functionswitchItem(isNext) {

        if (isNext) {
            activeItem++;
        } else {
            activeItem--;
        }

        activeItem = (activeItem == 3) ? 0 : activeItem;
        activeItem = (activeItem == -1) ? 2 : activeItem;

        showItem($("#main"), activeItem);
    }


    functionshowItem(selector, index) {

        selector.find(".item").hide().eq(index).toggle();
    }

<div id="main">   
    <divid="div1"class="item">Div 1</div><divid="div2"class="item">Div 2</div><divid="div3"class="item">Div 3</div>    
</div>

Solution 5:

Below is the code.

<ulclass="grid"><liclass="object">
     List Item 1<aclass="show-next"> Show the next list item</a></li><liclass="object">
     List Item 2
     <aclass="show-next">Show the next list item</a></li><liclass="object">
     List Item 3
     <aclass="show-next">Show the next list item</a></li></ul>

Below is the script you should insert.

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
   $eL = $('.grid .object').filter(":visible");
  //$(".grid").find(".object").hide().next().show();
    if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('.grid .object')[0].show();
          }
});