jQuery show hide sliding panel from left side

Question

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('«').removeClass('show').addClass('hide');
});

$('.slider-arrow.hide').click(function(){
    $( ".slider-arrow, .panel" ).animate({
      left: "-=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('»').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/

Answer 1

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('«').removeClass('show').addClass('hide');
    }
    else {      
    $( ".slider-arrow, .panel" ).animate({
      left: "-=300"
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('»').removeClass('hide').addClass('show');    
    }
  });
});

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

Answer 2

Since you are using jQuery to manipulate the "show" and "hide" after the DOM has loaded, jQuery doesn't know those elements exist.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...

I suggest using jQuery's on() in order to delegate events and select dynamically generated classes, like so:

$(document).on('click','.slider-arrow.show',function(){
  ....
});

$(document).on('click','.slider-arrow.hide',function(){
  ....
});

http://jsfiddle.net/eHded/2/