Accordion - scroll to the top of the open item [#2637948]

Not a request, but a solution :) I've tried lots of options, this one works. Really useful if you have a lot of content in tabs:

jQuery(window).load(function() {
        jQuery("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            animate: 400 // collapse will take 400ms
        });
        jQuery('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = jQuery(self).offset();
                jQuery('body,html').animate({ scrollTop: theOffset.top - 30 });
            }, 410); // ensure the collapse animation is done
        });
});

Comment	File	Size	Author
#4	field_group-accordion-scroll-active-section-2637948-1.patch	472 bytes	dbassendine

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

19 December 2015 at 04:48

juves created an issue. See original summary.

Comment #2

juves CreditAttribution: juves commented 19 December 2015 at 04:49

Status:

Active

» Closed (works as designed)

Comment #3

dbassendine CreditAttribution: dbassendine commented 23 April 2016 at 23:35

Category:	Support request	» Bug report
Status:	Closed (works as designed)	» Needs review

I think this is a valid issue to address - it's causing significant usability problems for us on a form that has many fields in each section. If you open a section, work through the form fields to the end, then click to open the next section - you end up at the bottom of the page. This is because the section above has collapsed, meaning your current page scroll position is now at the bottom.

Also see this problem described at http://stackoverflow.com/questions/3876433/jquery-ui-accordion-scrolling..., http://stackoverflow.com/questions/3621161/jquery-accordion-will-it-scro...

Here's a patch - I've used some of the code above, but adjusted to:

Use the accordion:activate event (http://api.jqueryui.com/accordion/#event-activate)
Only scroll when opening a new accordion section
Don't wait before scrolling to the active section - otherwise you get a quite nauseating scroll down and scroll up see-saw

This is against 1.5 and tested on jQuery 1.7 (using jquery_update).

Comment #4

dbassendine CreditAttribution: dbassendine commented 23 April 2016 at 23:36

File	Size
field_group-accordion-scroll-active-section-2637948-1.patch	472 bytes

Patch

Comment #5

smartparty CreditAttribution: smartparty commented 11 July 2017 at 09:52

This issue also applies to D8. The same patch can be adapted to suit within the accordion.js file within the formatters directory of the module. I'm using the adminimal admin toolbar so require an offset of - 80px.

i.e.

wrapper.accordion({
  heightStyle: 'content',
  active: active_index,
  collapsible: true,
  changestart: function (event, ui) {
	if ($(this).hasClass('effect-none')) {
	  ui.options.animated = false;
	}
	else {
	  ui.options.animated = 'slide';
	}
  },
  activate: function(event, ui) {
	if (ui.newHeader.offset()) {
	 $('body,html').animate({ scrollTop: ui.newHeader.offset().top - 80 });
	}
  }
});