1

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':

  1. Accordion parent 'div' Element: class .is-open is applied
  2. 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");
            }
        });
    });

Scott Lee
  • 11
  • 1

1 Answers1

0

This worked. Please feel free to suggest how to Clean it up.

<script type="text/javascript">
  jQuery(function($) {
  var acdn = $("#bdt-accordion-a189677 .bdt-accordion-item");
    $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 400) {
        acdn.addClass("bdt-open");
    } else {
        acdn.removeClass("bdt-open");
    }
});
});


jQuery(function($) {
   var con = $("#bdt-accordion-a189677 .bdt-accordion-content");
   $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 400) {
        document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "false");
        $('#bdt-accordion-a189677 .bdt-accordion-content').attr("hidden",false);
        con.addClass("animated");
        con.addClass("fadeIn");
    } else {
        document.getElementsByClassName("bdt-accordion-content")[0].setAttribute("aria-hidden", "true");
        $('#bdt-accordion-a189677 .bdt-accordion-content').attr("hidden",true);
        con.removeClass("animated");
        con.removeClass("fadeIn");
    }
});
});

Scott Lee
  • 11
  • 1