I'm trying to enhance the visual impact of a JS accordion by enabling each accordion item to Auto-open as the user scrolls down the page. They do not need to auto-close.
The accordion I am using performs 2 Actions when 'Clicked':
- Accordion parent 'div' Element: class .is-open is applied
- Accordion child 'div' Content:
a.) Attributes removed aria-hidden="true" & hidden
b.) Attributes applied aria-hidden="false"
How can I accomplish coercing these two actions to fire on Scroll / is Visible, rather than on Click?
My JS knowledge is limited. I cannot arbitrarily write JS, but can understand and manipulate it.
SEMI-WORKING CONCEPT (based on sticky header) – It does execute, but is not the proper way to achieve the desired result.
jQuery(function($) {
var acdn = $(".bdt-accordion-item");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
acdn.addClass("bdt-open");
} else {
acdn.removeClass("bdt-open");
}
});
});
jQuery(function($) {
var con = $(".bdt-accordion-content");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "false");
document.getElementsByClassName("bdt-accordion-content")[0].removeAttribute("hidden");
} else {
document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "true");
document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("hidden");
}
});
});