Fiddle me this! ;) jQuery accordion, scroll beginning of clicked tab to the top

JavaScript
1

Got a little bit of a problem with getting my jquery accordion to do what I want.

I always want the tab that is being clicked to be scrolled to a fixed amount of pixels from the top of the page, and I kinda got it working. But whenever the active tab is above the tab being clicked and if the page already is scrolled down a bit, the top and parts of the content of the clicked tab is scrolled up past the top of the page.

This is what i got:

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $('#accordion h3').bind('click',function(){
        theOffset = $(this).offset();
        $('body,html').animate({
            scrollTop: theOffset.top - 100
        });
    });
});

Here’s a fiddle to illustrate my problem,

For example, have “section 2” expanded, scroll down and click “section 3” tab and it all scrolls off the page, other way around it works though.

And if closing the active tab before opening a new one it also works fine so I’m assuming this has something to to with the height of the collapsing tab that messes up the scroll to top function!?

Hope someone can help, I probably approach this the wrong way. I kinda really don’t know what I’m actually doing as my jquery skills are limited to a basic cut n’ paste understanding! ^^

Thanks in advance and all help and pointers area more then welcome! :slight_smile:

Cheers

2

Solved! :slight_smile:

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 // collapse will take 300ms
        });
        $('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 100 });
            }, 310); // ensure the collapse animation is done
        });
});

…updated fiddle

Maybe there is a better way to do this!?