CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
c00000fd
c00000fd

Reputation: 22275

Scroll to the open tab in jQuery Accordion control placed in its own DIV

I am using the jQuery Accordion control that resides in its own scrollable div:

<div id="mainSection">
    <div id="accordion">
    </div>
</div>

with CSS:

#mainSection{
    clear: both;
    margin: 0;
    padding: 4px 0px 0px 0px;
    overflow-y: auto;
    max-height: 600px;
    border-top: thin solid #EEE;
}

The accordion control is initialized to open with a specific tab, as such:

    $("#accordion").accordion({
            collapsible: true,
            heightStyle: "content",
            active: nActiveTab
        });

The tabs for this accordion are added dynamically.

This works if the accordion doesn't have too many tabs. But if the accordion has, say, 100 tabs and I want to open the tab 99 at the very bottom (in my nActiveTab variable), when the accordion is created it is not scrolled down to that open tab 99.

Is there any way to make it scroll to it?

PS. Here's the fiddle for this.

Upvotes: 0

Views: 725

Answers (1)

Ramy Nasr
Ramy Nasr

Reputation: 2537

It is always helpful to create a fiddlejs with your code.

Try adding that after your accordion code, and let me know how it works:

var activeTabOffset = $(".ui-accordion-header-active").offset().top;
var mainSectionHeight = $('#mainSection').height();

if (activeTabOffset > mainSectionHeight) {
    $('#mainSection').animate({scrollTop: activeTabOffset}, 1000);
}

What this will do is scroll your mainSection element down ( or up ) to the first active accordion. I didn't test it, but it should work.

Here is a fiddle: http://jsfiddle.net/95g0L8pq/3/

Upvotes: 1

Related Questions