I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here.
On initial page load, the scrollbar only appears for the first sub-menu after scrolling within the container. However, it does not update properly for the second and third sub-menus. I have attempted to use ps.update(); as suggested on various websites, but I am unsure if I am calling the function correctly.
Update:
I was able to resolve the issue and have shared the updated code snippet in case it helps someone else in the future.
https://jsfiddle.net/prashu421/egkfxzrt/
$(document).ready(function() {
// Store variables
//var ps = new PerfectScrollbar('.sub-menu');
const container = document.querySelector('.sub-menu');
const ps = new PerfectScrollbar(container);
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
ps.update();
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
Your assistance and input are greatly appreciated. Thank you.