Whether you are using them for menus or displaying content, the accordions are cool. However in special cases when your accordion grows vertically huge, navigating through the panels can be slightly counterintuitive.

The issue occurs when you’ve reached the bottom of a very tall panel, and you clicked on the next panel switch to open the respective panel (which happens to be a very tall panel too). The scrollbar will stay at the same position while this new panel opens and the last panel closes and ends up putting your view at the bottom of the content of the new panel.

I have created a quick demo of this issue here. I’m using the awesome jQueryUI library to produce the accordion by the way. Click on the panel switch for Section 2 to expand it. Then scroll down until you see the panel switch for Section 3 and click on it. You will have to scroll up to get to the beginning of the content of Section 3. Not very nice.

To improve the navigation, a simple auto-scroll feature can be added to the accordion that brings the browser viewport to the top of the opened panel. In jQueryUI, we can take advantage of the activate event hook to trigger the auto-scroll. As for the scrolling itself, we can simply use jQuery’s animate function to add a smooth scrolling effect for a nice touch.

The final accordion code is as follows.

$( "#accordion" ).accordion({
	heightStyle: "content",
	collapsible: true,
	active: false,
	activate: function( event, ui ) {
		if(!$.isEmptyObject(ui.newHeader.offset())) {
			$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
		}
	}
});

Check out the updated demo here.

Let me know what you think of this workaround. Have a nice day!