Show Hide panel

by Rishabh Sharma

HTML

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

CSS

.testpanel {
	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(){
        if($(this).hasClass('show')){
	    $( ".slider-arrow, .testpanel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('&laquo;').removeClass('show').addClass('hide');
        }
        else {   	
	    $( ".slider-arrow, .testpanel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('&raquo;').removeClass('hide').addClass('show');    
        }
    });

});