<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <div class="wrap"> <div id="toolbar"> <a class="btn btn-sm btn-primary toolbutton" href="#"> <i class="fa fa-cogs"></i> </a>   <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#report"> Report a bug </button> <div class="btn-group btn-group-sm"> <a href="#" id="gridview" class="switcher active btn btn-default"><i class="fa fa-fw fa-th"></i></a> <a href="#" id="listview" class="switcher btn btn-default"><i class="fa fa-fw fa-bars"></i></a> </div> </div> </div>

.wrap{position: relative} #toolbar{ display: block; position: fixed; bottom: 0; right: 0; z-index: 999; min-height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); padding: 9px; -webkit-border-radius: 3px; border-radius: 3px; margin-right: -183px; // this depends on how wide your toolbar is }

$(function() { $('#toolbar').stop().animate({'margin-right':'-183px'},1000); function toggleTools() { var $inner = $("#toolbar"); if ($inner.css("margin-right") == "-183px") { $inner.animate({'margin-right': '0'}); $(".toolbutton").html('<i class="fa fa-times"></i>') } else { $inner.animate({'margin-right': "-183px"}); $(".toolbutton").html('<i class="fa fa-cogs"></i>') } } $(".toolbutton").bind("click", function(e){ toggleTools(); e.preventDefault(); }); });