jQuery tabs + scroll to content simultaneously

This is driving me a little crazy as I just can’t get it to work :(!

I have jQuery tabs set-up as follows (all working) :

$(".tabs_area" ).tabs({
    fx: { duration: 'slow', opacity: 'toggle' }
});

I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :

$('.tabs_area li a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');

    event.preventDefault();
});

My problem is that sadly they won’t work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn’t scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn’t good.

Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.

So I think I need to combine the scroll functionality within the tabs set-up code… somehow… as a callback or something… but I just keep breaking it :(!!

Any help would be so much appreciated.

Thanks in advance,
TJ

You can check this out here : http://jsfiddle.net/uFTTK/ :slight_smile: