jQuery show hide sliding panel from left side

Paramasivan Published at Dev

Paramasivan

I want a panel to slide from left edge of browser when clicking a button and hide the panel when clicking the same button (toggle).

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

jquery

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

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

It is showing the panel but not hiding the panel. Any problem with the selectors used?

http://jsfiddle.net/Paramasivan/eHded/1/

Trevor

As others have said with jQuery once the document is initialized its only looking for elements that initially existed. For that reason your .show function was being run every time.

Instead of looking for a click event on .slider-arrow.show you can just look at .slider-arrow and then check for the classes once it has been clicked like in this example.

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

http://jsfiddle.net/eHded/4/

Collected from the Internet

Please contact [email protected] to delete if infringement.