Topic: Scroll to open accordion
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.)
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
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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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