<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>

$(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; }); });