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.)

Add comment

iamjonmiller pro answered 2 years ago

0 0 Best answer

<p>I ended up solving it myself by rewriting my functions and not using animate.</p>

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

Mateusz Lazaru staff answered 2 years ago