Question

I have several divs with class “image” and several with class “thumbnail” (both can be variable based on amount user adds but always thumbnail is generated using image and always is in same order so first thumb come from first image) I have all the thumb divs being hidden but the first one already using:

  $('.image:not(:first)').hide();

I want to iterate through thumbnail class and have it show second image and hide others if I click 2nd thumb, 3rd image if I click 3rd thumb, etc.

how would I do this in jQuery?

Answer 1

You have to create some means of linking the two together. In this example I use the element’s index. You can then use CSS classes to toggle the display state.

http://jsfiddle.net/ZCuYM/1/

$('.thumb').click( function() {
    //switch active thumb
    $('.thumb.active').removeClass('active');
    $(this).addClass('active');

    //switch active image
    $('.image.active').removeClass('active');
    $('.image').eq($(this).index()).addClass('active');
});​