Topic: Scroll to open accordion

iamjonmiller pro asked 1 year ago

Expected behavior Up until version 5.0.0 I have used a simple script like this to scroll to any open accordion and bring it into focus.

$('.collapse').on('', function(e) {
  var $card = $(this).closest('.accordion-item');
  var $open = $($(this).data('parent')).find('');

  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0)
        additionalOffset =  $open.height();
    scrollTop: $card.offset().top - additionalOffset
  }, 500);

Actual behavior

This animation is entirely broken on version 5.0.0. It seems the animation will be triggered, but it never is removed from the body and thus leaves a white screen. I understand changes were made to animations and I have been trying to figure out how to write this function to utilize these changes. I even attempted to write a version using smooth scroll, but that had to be abandoned because these elements don't have hrefs.

Resources (screenshots, code snippets etc.)

iamjonmiller pro answered 1 year ago

I ended up solving it myself by rewriting my functions and not using animate.

    const accordionItems = document.querySelectorAll('.accordion-collapse')

    function scrollToCollapse(el) {
        let scrollOffset = el.offsetParent.offsetTop - 25
            top: scrollOffset,
            left: 0,
            behavior: 'smooth'

    accordionItems.forEach((el) => {
        // if it isn't open, wait for it to open and then scroll
        el.addEventListener('', (e) => {
            console.log('scrolling to newly opened')

    // hybrid jquery/vanilla js to get around inability to add event listeners to cloned elements in carousel
    $('a.btn-action').on('click', function btnShown() {
        let target = $(this).attr('data-mdb-target')
        let el = document.getElementById(target)
        if (el.className.match(/\bshow\b/)) {
            console.log('scrolling to already open')

Mateusz Lazaru staff answered 1 year ago


There is a bug with jquery animate in MDB 5.0.0. It will be fixed soon. Untill that, try this workaround using vanilla JS:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No