CODEWITHSUNDEEP
jqueryjquery-uiaccordion
jasonflaherty
jasonflaherty

Reputation: 1944

jQuery UI Accordion div contains lot of data opening new accordion not scroll up page

I am using jquery ui with the accordion feature running. I have a <h3></h3><div></div> with a lot of data in it which fills the page vertically. When you scroll down to click and open the next accordion selection it pulls way up the page, therefore hiding some of the content until I scroll back up.

Is there a way to prevent this? A way to on click make the currently selected h3 tag take the user to the top of the <h3> ?

EDIT: The main idea I am looking for here is making sure the <h3></h3> clicked on is not out of the viewing area. Ideally I'd like it to be about 50 or so px down from the top.

Here is a Fiddle of the Progress: http://jsfiddle.net/rwyvh/

Upvotes: 0

Views: 495

Answers (1)

John Kalberer
John Kalberer

Reputation: 5800

Here is the jsFiddle. I had to use ui.newHeader to get the position inside the change event.

$("#accordion").accordion({
    autoHeight: false,
    collapsible:true,
    navigation:true,
    active:false,
    change: function(event, ui) {
        $(window).scrollTop(ui.newHeader.position().top - 50);
    }
});​

Upvotes: 1

Related Questions