Snippets

expand-collapse-accordions.js

/* 
 Gets expand all button, collapsed content and current collapsed and expanded accordions
 when expand btn will be clicked, the text change and show class will be added to collapsed content
 and collapsed class will be removed from collapsed accordion. This will set all collapsed accordions
 newly opened aria-expanded to try and all buttons open to white background
*/
let toggleExpandAccordions = function () {
    let expandBtn = $("#expand-all");
    let collapsedContent = $(".accordion-collapse:not(.show)");
    let collapsedAccordions = $(".accordion-button.collapsed");
    let expandedAccordions = $(".accordion-button:not(.collapsed)");

    if (expandBtn.text() == "Expand all"){
        expandBtn.text("Collapse all");
        collapsedContent.addClass("show").slideDown();
        collapsedAccordions.removeClass("collapsed");
        collapsedAccordions.attr("aria-expanded", "true");
        $(".accordion-button").addClass("bg-white")
    } else {
      /*
      change expand button text, remove show from all accordion content that has accordion-collapse
      adds collapsed to close the accordion, adds aria-expanded to false for screen readers and removes the
      bg-white class so functionality will return before expand all has been pressed
      */
        expandBtn.text("Expand all");
        $(".accordion-collapse").removeClass("show").slideUp();
        expandedAccordions.addClass("collapsed");
        expandedAccordions.attr("aria-expanded", "false");
        $(".accordion-button").removeClass("bg-white")
    }