jQuery remove class and add to another div not working

Question

I have a gallery of 3 images lined up next to each other. To start with, the center image is large and the 2 images either side are small. When you click the left image (for example) the middle and right image slide over 100px and the left image becomes large. Then for example if you click the middle image again, the 3 images slide right and the middle image becomes large again and so on.

The code I have written doesn't seem to work so far, the outer divs enlarge when clicked but don't shrink again and the middle div never does anything when clicked.

Can someone tell me what is wrong with my code:

if($('.main_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.main_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}

here is a JSfiddle of my work: http://jsfiddle.net/QS3BW/3/

Answer 1

You can't put the if like that. It's the event which run a code. When you have the click event, you can put you condition.

Try with something like this :

$("#images_holder").children().click(function(){

// if has class run this code

// else if has this class, run this code

...

});