JQuery show hide sliding panel left side

Question

I want the panel to slide on the left side of the browser when I click a button and hide the panel when I click on 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 shows the panel, but does not hide the panel. Any problem with the selectors used?

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

Answer 1

As others have said with jQuery, once a document is initialized, it searches only for elements that originally existed. For this reason, your .show function runs every time.

Instead of looking for the click event on .slider-arrow.show you can just take a look at .slider-arrow and then check the classes as soon as it is clicked, as 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 use jQuery to control "show" and "hide" after loading the DOM, jQuery does not know that these 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 on() to delegate events and select dynamically generated classes, for example:

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

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

Answer 3

I think you can control the action by selecting from the active binding class as follows:

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

So, you have only one animation function.

Here is the updated fiddle: http://jsfiddle.net/eHded/5/

Answer 4

You should try using .slideToggle() , put inside .click(function(){/*in here*/}) .

Answer 5

When you write $('.slider-arrow.hide').click(func..... , which binds the click event during the first run of the code (possibly when the document is ready). If you change the DOM later (i.e. Add class .hide ), you need to bind the click event again.

Instead, you need to use the jQuery .on() method ( http://api.jquery.com/on/ ).

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

A better alternative, however, would be to use CSS3 transitions and jQuery .toggleClass()

 .panel { left: -300px; transition: left 1s; /* other styles... */ } .panel.expand { left: 0; } $('.slider-arrow').click(function() { $('.panel').toggleClass('expand'); }