Awesome Accordions website

Expand / Collapse

To give the panel the needed expand/collapse effect we created a script. This will expand/collapse the panel and also uses tabindex for screen readers to skip the focus for hidden elements


function toggle_height(element) {
       let li_elem = element.closest("li.awesome-accordion-item");
       let ac_elem = li_elem.find(".awesome-accordion-panel");
       if (li_elem.hasClass("closed"))
       {
           ac_elem.css("max-height", "400px");
           li_elem.removeClass("closed");
           li_elem.find(".awesome-accordion-btn").attr("aria-expanded", "true");
           li_elem.find(".awesome-accordion-panel *").removeAttr("tabindex");
           $(".awesome-accordion-panel").attr("tabindex", 0);
       }
       else
       {
           ac_elem.css("max-height", 0);
           li_elem.addClass("closed");
           li_elem.removeClass("opened");
           li_elem.find(".awesome-accordion-btn").attr("aria-expanded", "false");
           li_elem.find(".awesome-accordion-panel *").attr("tabindex", -1);
           $(".awesome-accordion-panel").attr("tabindex",-1);
       }
   }