CODEWITHSUNDEEP
jquery-uijquery-ui-accordion
Eyeball
Eyeball

Reputation: 1372

jQuery UI Accordion Scrolling issue

I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?

Upvotes: 1

Views: 3962

Answers (1)

Drew Gaynor
Drew Gaynor

Reputation: 8472

You can bind a function to the accordionchange event and use jQuery scrollTop():

JavaScript

$(function () {
    $("#accordion").accordion({
        autoHeight: false,
        header: "h3"
    });

    $('#accordion').bind('accordionchange', function (event, ui) {
        $(window).scrollTop(ui.newHeader.offset().top);
    });
});

HTML

<div id="accordion">
    <div id="accordion-one">
        <h3><a href="#">First</a></h3>
        <div>Some lengthy text</div>
    </div>
    <div id="accordion-two">
        <h3><a href="#">Second</a></h3>
        <div>Less lengthy text</div>
    </div>
    <div id="accordion-three">
        <h3><a href="#">Third</a></h3>
        <div>Other text</div>
    </div>
</div>

I tested this in FF8.

Links

Upvotes: 2

Related Questions