Since we are asking users to open/close panels manually we also need to give them an option to collapse / expand all panels at the same time. This helps users to reset the accordion to its initial state or helps them to open all panels for users. who don’t want to open them one by one

For this we created two alternative controls to toggle between open all and close all, we use an unordered list to group them together.

$(document).on("click", "[data-accordion-action]", function () {
       if ($(this).data("accordion-action") === "openall")
       {
           $(".awesome-accordion-item").removeClass("closed");
           $(".awesome-accordion-panel").css("max-height", "none");
       }
       else if ($(this).data("accordion-action") === "closeall")
       {
           $(".awesome-accordion-item").addClass("closed");
           $(".awesome-accordion-panel").css("max-height", 0);
       }
   });