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:
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