Show Hide panel - PARAMETERIZED - NICE

by bizamajig

HTML

<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

CSS

.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;
}

JavaScript

$(function(){
$('.slider-arrow').click(function(){
     var anchor = this;
    var removeClass = "show";
    var addClass = "hide";
    var diff = "+=300";
    var arrows = "&laquo;";
    if($(anchor).hasClass("hide")){
        diff = "-=300";
        removeClass = "hide";
        addClass="show";
        arrows ="&raquo;";
    }
    $( ".slider-arrow, .panel" ).animate({
      left: diff
      }, 700, function() {
        // Animation complete.
          $(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
      });     
   });   
});