Toggle function left to right


<div class=”pollSlider”>

Text Goes Here

</div> <!– close –>

<div id=”pollSlider-button”>Button</div>




var slider_width = $(‘.pollSlider’).width();//get width automaticly

$(‘#pollSlider-button’).click(function() {

if($(this).css(“margin-right”) == slider_width+”px” && !$(this).is(‘:animated’)){

$(‘.pollSlider,#pollSlider-button’).animate({“margin-right”: ‘-=’+slider_width});} else {

if(!$(this).is(‘:animated’))//perevent double click to double margin


$(‘.pollSlider,#pollSlider-button’).animate({“margin-right”: ‘+=’+slider_width});







.pollSlider{position: fixed;height: 100%;background: #003471;width: 200px;right: 0px;margin-right: -200px; height: 700px; top: 100px;border: 1px solid #dcdcdc; }

#pollSlider-button{position:fixed;width:50px;right:0px; top:110px;margin-top:5px;background:#222;cursor:pointer;padding: 6px; text-align: center;border:1px solid #dcdcdc;border-right: none;display:inline-block;color:#fff;font-family:arial;

font-size:22px; font-weight:bold;font-style:normal;height:50px;text-decoration:none;}


Fiddle example


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s