jQuery accordion, scroll beginning of clicked tab to the top, doesn't work if expanded tab is above the one being clicked?

Question

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! :)

Cheers

Solution 1

Yes, its the height of the tab thats getting closed thats the cause of the issue.

The top of the clicked h3 changes immediately afterwards due to the collapsing of a tab above it.

A workaround (a bad one perhaps), is to trigger the scroll animation after the collapse animation finishes, i.e. if the collapse animation is set for 300ms, start off the scroll animation after 310ms or something.

$(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

Solution 2

You can add an activated function to the accordion. That way it triggers once the other show/hide animations have completed.

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $('body,html').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

the try catch is required as ui.newHeader is undefined if you are collapsing an open accordion tab.

Comments

[Andre]

YES! :D Thanks a lot, I tried to delay the actual scroll event but without luck, but that works! Excellent!

[Technotronic]

Works good! My only question is why do you do var self = this;? I tried to do it with var theOffset = $(this).offset(); and it didn't work. Any idea why?

[techfoobar]

@Technotronic - Because the value of this inside the setTimeout callback isn't what it is outside.

[Technotronic]

Right. Silly me. Thank you!