Question

I’m trying to create a simple toggling sidebar using jquery, where it expands and contracts when a button is pressed. The button also changes to another type of button when pressed. The sidebar will expand, but for some reason, it will not move back to it’s original position. You can see a copy of the javascript and html at http://www.jqueryhelp.com/viewtopic.php?p=4241#4241

Here is the working code, thanks Bendeway! 😀

$('.btn-slide').live('click', function(e){     e.preventDefault();     $('#sidebar').animate({opacity: 'show', left: 250}, 'slow');     $(this).toggleClass('btn-slide').toggleClass('active'); });   $('.active').live('click', function(e){     e.preventDefault();     $('#sidebar').animate({opacity: 'hide', left: 100}, 'slow');     $(this).toggleClass('btn-slide').toggleClass('active'); }); 

Answer 1

try instead of right use left with a negative number. in addition I would recommend using preventDefault instead of returning false.

$('.active').click(function(e){     e.preventDefault();     $('#sidebar').animate({opacity: 'hide', left: -250}, 'slow');     $(this).toggleClass('btn-slide'); });  

Update

Another piece i just noticed is that your attaching a click event to the .active button, when the document is ready, but there is no .active button when the document is ready that comes in after you change it. There are a couple options here.

First is to use the new live feature of jquery 1.3

$('.btn-slide').live('click', function(e){     e.preventDefault();     $('#sidebar').animate({opacity: 'hide', left: 250}, 'slow');     $(this).toggleClass('btn-slide').toggleClass('active'); });   $('.active').live('click', function(e){     e.preventDefault();     $('#sidebar').animate({opacity: 'hide', left: -250}, 'slow');     $(this).toggleClass('btn-slide').toggleClass('active'); });  

The other option would be to have set the click event on a different modifier (eg. on the id, maybe).

<span>News  <img src='img/overlay.png' id='sliderButton' class='btn-slide' alt='' /></span>      

then use this to handle the click

$('#sliderButton').click(function(e){    e.preventDefault();    $(this).is('.btn-slide').each(function() {    $('#sidebar').animate({opacity: 'show', left: 250}, 'slow');    });    $(this).is('.active').each(function() {    $('#sidebar').animate({opacity: 'hide', left: -250}, 'slow');    });   $(this).toggleClass('active').toggleClass('btn-slide');   });  

or even more concise

$('#sliderButton').click(function(e){    e.preventDefault();    var animationSettings = {opacity: 'show', left: 250};   if ($(this).hasClass('active') )   {     animationSettings = {opacity: 'hide', left: -250};   }     $('#sidebar').animate(animationSettings , 'slow');    $(this).toggleClass('active').toggleClass('btn-slide');   });  

The final option that I can think of would be to set the click events after you change them, but I wouldn’t do that so I’m not going to supply a sample.

Lastly, I would put in alert into your active callback and make sure that your active button event is actually firing.