Question

56

jQuery show hide sliding panel from left side

rated 0 times [ 58] [ 2] / answers: 1 / hits: 49449 / 11 Years ago, tue, october 15, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raynamadilynl

Add To Favorites

Follow

Total Points: 653

Total Questions: 110

Total Answers: 98

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 11 Years ago micayla · Accepted Answer

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/