1

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

$(document).ready(function() {
  $('#next').click(function() {
    $(this).next().next().children("div").hide();
    $(this).next().next().children("div").show();
  });
});
#div2,
#div3 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<hr />
<div id="main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
</div>

DEMO

5 Answers 5

7

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

1
  • The Divs are auto generated using a loop using XSLT and no way to add first or last as class. Any help on that?
    – Si8
    Commented Jan 29, 2016 at 12:09
3

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();
  });
});
2
  • would be better without the global, this also assumes the #main div will always only have 3 children... i suggest making % 3 dynamic Commented Apr 2, 2012 at 15:00
  • @JohnnyCraig: yep, could easily put $('#div1').parent().children('div').length in there, or $('#div1').siblings('div').length + 1
    – sje397
    Commented Apr 2, 2012 at 15:06
2

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

1
  • I have something like this: jsfiddle.net/st8q8z5g/3 The previous isn't working and Next works except, how can I modify it so the it cycles through if it is the last one or the first one?
    – Si8
    Commented Jan 29, 2016 at 14:34
0

Something like this (next and previous handled):

.item{
    display:none;
}​


var activeItem = 0;

function switchItem(isNext) {

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

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

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


    function showItem(selector, index) {

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

<div id="main">   
    <div id="div1" class="item">Div 1</div>
    <div id="div2" class="item">Div 2</div>
    <div id="div3" class="item">Div 3</div>    
</div>
1
  • 2
    You could also use activeItem = (activeItem + 3) % 3;, just to simplify a little bit ;) or even activeItem = (activeItem + (isNext ? 1 : -1) + 3) % 3;
    – sje397
    Commented Apr 2, 2012 at 15:01
0

Below is the code.

<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="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();
          }
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.