how to show two divs each time you press the next and previous buttons with Jquery

Question

how to show two divs each time you press the next and previous buttons with Jquery

Navigation

#1 by (1 votes)

1

What I need is to do a kind of paging but only with buttons back and forth and show me only two divs, I have the following code, but this only shows a single div at a time:

$(document).ready(function(){
      $(".divs div.panel").each(function(e) {
          if (e != 0)
              $(this).hide();
    
      } );
    
      $("#next").click(function(){
          if ($(".divs div.panel:visible").next().length != 0)
              $(".divs div.panel:visible").next().show().prev().hide();
          else {
              // $(".divs div.panel:visible").hide();
              // $(".divs div.panel:first").show();
          }
          return false;
      });
    
      $("#prev").click(function(){
          if ($(".divs div.panel:visible").prev().length != 0)
              $(".divs div.panel:visible").prev().show().next().hide();
          else {
    
              // $(".divs div.panel:visible").hide();
              // $(".divs div.panel:last").show();
          }
          return false;
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
        <div class="panel">1</div>
        <div class="panel">2</div>
        <div class="panel">3</div>
        <div class="panel">4</div>
        <div class="panel">5</div>
        <div class="panel">6</div>
        <div class="panel">7</div>
    </div>
    <a id="prev">prev</a>
    <a id="next">next</a>

If someone could help me show two divs each time it would be great!

Thanks in advance!

javascript jquery html

asked by Emmanuel Villegas 16.06.2016 в 20:20

source

1 answer

Problem with class PHPMailer How to access a series of elements (gridpane type in my case) stored in an ObservableList

score 1 · Accepted Answer

You can use a variable to store the current position and, depending on this, go calculate the divs to show:

$(document).ready(function() {
  var current = 0;
  var $divs = $(".divs div.panel");
  
  function show(index){
    current = index;
    var next = $divs.length <= current + 1 ? 0 : current + 1;
    for (var i = 0; i < $divs.length; i++){
      (i === current || i === next)
        ? $($divs[i]).show()
        : $($divs[i]).hide();
    }
  }

  $("#next").click(function() {
    next = current + 2;
    if ($divs.length <= next){
      next = next - $divs.length;
    }
    show(next);
    return false;
  });

  $("#prev").click(function() {
    prev = current -2;
    if (prev < 0){
      prev = $divs.length + prev;      
    }
    show(prev);
    return false;
  });
  
  show(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
  <div class="panel">4</div>
  <div class="panel">5</div>
  <div class="panel">6</div>
  <div class="panel">7</div>
</div>
<a id="prev">prev</a>
<a id="next">next</a>