Slide to active accordion tab of linked accordion

Support
#1

I have an accordion with 4 tabs on my page and they’re linked. It’s visible in mobile view and because of the length the view needs to slide to the top of the tab when it’s opened. I found this script from one of the old support threads. It appears to work on the first accordion tab on my page but then breaks as I open more tabs. Please help.

jQuery(document).ready(function($) { $('.x-accordion-toggle').click(function() { 
var cur = $(this).offset().top;
var navbar = $('.x-navbar').outerHeight() + $('#wpadminbar').outerHeight();
console.log(cur);
setTimeout(function() {
$('html, body').animate({
scrollTop: cur - navbar
}, 700, 'swing');
}, 300);
});
});
#2

Hello There,

Thanks for writing in! I have tested your site in a mobile phone and I could not replicate the issue. The accordion tabs will scroll when clicked. Please clear your browser cache or use private browsing mode and test your site again.

Please let us know how it goes.

#3

Hmm you must not understand. I’ve tested it on multiple desktop and mobile devices and the issue persists.

When you click open any of the tabs after page load, the first one will work. Then, if you click any of the tabs below it, the view scrolls past the tab. Here’s a screen capture demonstrating the issue: https://thestudiounited.org/wp-content/uploads/2017/09/Example.gif

#4

Hello There,

I can confirm that the issue exist. Will you please update the the JS code and make use of this instead:

jQuery(document).ready(function($) { 
  var navbar = $('.x-navbar').outerHeight() + $('#wpadminbar').outerHeight();

  $('.x-accordion-toggle').click(function() { 
    var cur = $(this).offset().top;
    
    console.log(cur);
    
  });

  setTimeout(function() {
      $('html, body').animate({
        scrollTop: cur - navbar
       }, 700, 'swing');
    }, 800);
});

We have increased the delay so that there is enough time for tab content to expand before executing the scroll to the top.

Hope this helps.

#5

Hmm I just updated the JS code but the provided code doesn’t appear to work.

#6

Hi there,

Please kindly replace the code with this one:

jQuery(document).ready(function($) { 
  var navbar = $('.x-navbar').outerHeight() + $('#wpadminbar').outerHeight();

  $('.x-accordion-toggle').click(function() { 
    var cur = $(this).offset().top;
    
    console.log(cur);
    setTimeout(function() {
      $('html, body').animate({
        scrollTop: cur - navbar
       }, 700, 'swing');
    }, 800);
    
  });

});

Please kindly consider that Accordion element does not scroll the browser window. So if you scroll to see the rest of content and click on the other accordion tab it will go to its original place.

The behavior you see is the standard behavior and that is why it is usually recommended that you avoid using accordion for mobile devices. It is recommended that you strip out the tabs and accordions and simply add the content stacked which user can scroll on mobile devices.

The code we provided is merely a javascript code which waits for the click on the accordion tab and it scrolls the browser window up or down to bring back the accordion in the viewport. This is not the original functionality and the code we provide is not a bulletproof one, and just is a band-aid for your case.

Thank you for your understanding.