sliding panel from left to right side

Question

I have a panel and its positioned in the left side I tried to reposition it from the left to the right side can anyone me here my Fiddle thank you.

here is the mark up and my js

 $(function(){ $(document).on('click','.slider-arrow.show',function(){ $( ".slider-arrow, .panel" ).animate({ left: "+=300" }, 700, function() { // Animation complete. }); $(this).html('«').removeClass('show').addClass('hide'); }); $(document).on('click','.slider-arrow.hide',function(){ $( ".slider-arrow, .panel" ).animate({ left: "-=300" }, 700, function() { // Animation complete. }); $(this).html('»').removeClass('hide').addClass('show'); }); }); 

 .panel { width:300px; float:left; height:550px; background:#d9dada; position:relative; left:-300px; } .slider-arrow { padding:5px; width:10px; float:left; background:#d9dada; font:400 12px Arial, Helvetica, sans-serif; color:#000; text-decoration:none; position:relative; left:-300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel"> </div> <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a> 

Answer 1

It's mostly just changing left to right with your float and left position attributes. There are better ways to approach this problem, generally using position: absolute , but this works too.

body {
    overflow: hidden;
}

Will prevent there from being a horizontal scrollbar on the page.

https://jsfiddle.net/v58eozu1/2/