Scroll to open accordion


Topic: Scroll to open accordion

iamjonmiller pro asked 2 years 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('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.accordion-item');
  var $open = $($(this).data('parent')).find('.collapse.show');

  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    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.)


mlazaru staff answered 2 years ago

Hi,

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:

https://mdbootstrap.com/snippets/standard/mlazaru/4390626#js-tab-view


iamjonmiller pro answered 2 years ago

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

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

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

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

    // 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')
            scrollToCollapse(el)
        }
    });
</script>

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: 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