Bootstrap Snippet show hide couples divs using Next Previous button using jQuery using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 $(document).ready(function(){
  $(".divs div.panel").each(function(e) { 
              if (e > 1) 
                  $(this).hide(); 
                  console.log(e); 
          }); 
         
          $("#next").click(function(){ 
              if ($(".divs div.panel:visible:last").next().length != 0){ 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:first").hide(); 
                  $(".divs div.panel:visible:first").hide(); 
              } 
              else { 
                  //either hide the next button or show 1st two again. :) 
              } 
              return false; 
          }); 
         
          $("#prev").click(function(){ 
              if ($(".divs div.panel:visible:first").prev().length != 0){ 
                  var curVisLen = $(".divs div.panel:visible").length; 
                 $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:last").hide(); 
                  if(curVisLen == 2){ 
                    $(".divs div.panel:visible:last").hide(); 
                  } 
              } 
              else { 
                  //either hide the button or show last two divs 
                  // $(".divs div.panel:visible").hide(); 
                  // $(".divs div.panel:last").show(); 
              } 
              return false; 
          }); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"show hide couples divs using Next Previous button using jQuery"
Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"show hide couples divs using Next Previous button using jQuery" Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"show hide couples divs using Next Previous button using jQuery"
Bootstrap 4.1.1 Snippet by naimansari