jQuery Tabs and Sliding effect - Doesn't work together

Question

Hi,
I’m working on a website where I need a vertical tab system. I also have an arrow-image indicating which tab/thumbnail the user clicked. The arrow should slide between the two thumbnails. Have a look here:

Look here - www.imterkel.com/test/index.html
Don’t freak out. The Jesus-like thumbnail is just a dummy-image from Google.

I’ve got the tabs working. And I’ve got the sliding arrow to work. But when I combine these to, it doesn’t work. I’ve also tried other jQuery Tab plugins.

Answer 1

I'm not entirely sure why — but changing the selector on the click binding to $("#thumbs li a") and grabbing the top position from the parent seems to work. My guess is that the $.idTabs plugin is canceling the event otherwise.

http://jsfiddle.net/neonsilk/Abq8F/

// Hook up the click event
$("#thumbs li a").click(function() {
    // Get position of current image
    arrow.stop().animate({'top' : $(this).parent().position().top }, 500); 
});