jQuery Accordion - will it scroll to the top of the open item?

Question

With the jQuery accordion control, how can I have it scroll to an item I've selected when it is off the screen?

When:

• I have an accordion item with contents larger than the viewable window
• I scroll down to the second accordion item
• I click the second accordion item to display it
• The first accordion option collapses, and the second opens, but slides off screen.

Is there an option for the accordion to scroll to the second item?

Answer 1

You can try using the scrollTo jQuery plugin. It lets you do things like this:

$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view
$('div#foo').('#bar'); // scroll within div#foo so #bar is in view

Bind scrollTo() to the accordionchange event, like this:

$('#youraccordion').bind('accordionchange', function(event, ui) {
  /* In here, ui.newHeader = the newly active header as a jQ object
              ui.newContent = the newly active content area */
  $.scrollTo( ui.newHeader ); // or ui.newContent, if you prefer
});

When is the accordionchange event triggered?

If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

References: jQuery UI Accordion

Answer 2

@Ken

Would you be able to help me implement this same challenge @y0mbo faced? When you click on the title, for example, in my demo below, then click on last title, you'll see the page will scroll to the content off screen. Could you be able to me help me with the code?

http://jsbin.com/anuzi3/4/

Evan

Answer 3

Hi, I used scrollTo with accordion and it works fine. except when you click an already open accordion item. I get a javascript error with regards to the scrollTo plugin and the accordion stops working. any ideas? Thanks.