jQuery not working on renamed element

JavaScript
1

Hi there,

So I want to perform a number of animations on a div on a click event. Then I want to perform a second set of animations, again on a click event.

I’m using the same button each time, but changing the id to reverse the process. So the anchor starts off as ‘#more’, then at the end of the animation, it becomes ‘#less’.

The animations work when the anchor has an id of more, but not when it has an id of less. I’m wondering if there is a more graceful way of performing this function.

There a test page up here:
www.theclassifiedsband.co.uk/testpage

and here’s the relevant code:


  $('#more').click(function(){
	$('#major').fadeOut('slow', function(){
	  $('#captain').animate({width: "800px"}, 'slow').delay(100).animate({height: "620px"}, 'slow', function(){
		$('.hide').fadeIn('slow');
		$('#more').text('Read Less').attr('id', 'less');
	  });
	});
  });
  
  $('#less').click(function(){
	$('#hide').fadeOut('slow', function(){
	  $('#captain').animate({height: "260px"}, 'slow').delay(100).animate({width: "320px"}, 'slow', function(){
		$('#less').text('Read More').attr('id', 'more');
	    $('#major').fadeIn('slow');
	  });
	});
  });

Any thoughts much appreciated.

Mike

2

I suggest to add/remove extra class instead of changing id. So instead of changing to #less, add class “less”. CSS entry would be #more.less, and instead of changing it back to #more, remove class “less”.

Code would be something like this:

$('#more').click(function(){
    if(!$(this).hasClass('less'))
    {
        $('#major').fadeOut('slow', function(){
          $('#captain').animate({width: "800px"}, 'slow').delay(100).animate({height: "620px"}, 'slow', function(){
            $('.hide').fadeIn('slow');
            $('#more').text('Read Less').addClass('less');
          });
        });
    }
    else{
        $('#hide').fadeOut('slow', function(){
          $('#captain').animate({height: "260px"}, 'slow').delay(100).animate({width: "320px"}, 'slow', function(){
            $('#more').text('Read More').removeClass('less');
            $('#major').fadeIn('slow');
          });
        });
    }
});
3

Thanks CyberAlien,

I did think about that, and did try it with a class, and it still didn’t work, but I will give it another go. There’s a very good chance I mistyped something along the way.

Best,
Mike