$('#next').click(function(){ //slide a div only if there is a next element if($('.currentRight').length >0) { $('.current').animate({left:'-100px'}).removeClass('current').addClass('currentLeft').next().animate({left:'0px'}).removeClass('currentRight').addClass('current'); } }); $('#previous').click(function(){ //slide a div only if there is a previous element if($('.currentLeft').length >0) { $('.current').animate({left:'100px'}).removeClass('current').addClass('currentRight').prev().animate({left:'0px'}).removeClass('currentLeft').addClass('current'); } }); $('#add').click(function(){ //it is used for simplicity's sake. I intend to use append()/prepend() to add more content var cont = $('.current').html()+'More<br/>'; $('.current').html(cont); var ht = $('.current').css('height'); $('#container').css('height',ht); }); 

 /*the main div that contains all the sliding div*/ #container{ width:100px; border:1px solid #000; height:20px; position: relative; overflow:hidden; } /*there are 3 different classes * current - div that is presently visible * currentLeft - div that should slide from left on pressing previous * currentRight - div that should slide from right on pressing next */ .current{ width:99px; height:auto; position: absolute; float: left; left:0px; } .currentLeft{ width:99px; height:auto; position: absolute; left:-100px; float:left; } .currentRight{ width:99px; height:auto; position: absolute; left:100px; float:left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="currentLeft"> First Div </div> <div class="current"> Second Div </div> <div class="currentRight"> Third Div </div> </div> <a href="#" id="previous">Previous</a> <a href="#" id="next">Next</a> <a href="#" id="add">Add content</a> ​