Expand/Collapse All Buttons Using Elementor Accordion

Here’s how to have the ability to expand all/collapse all panes within an Elementor accordion element:

Add an HTML widget and 2 buttons to your site. Give the Expand All button the CSS class, “expand-all”, and the Collapse All button the class, “collapse-all”
Add an HTML element to your page and paste in the code as shown below.
Voila, now when you click the buttons they expand/collapse as desired.

				
					<script>
document.addEventListener("DOMContentLoaded", function () {
    // Function to expand all accordion panes
    function expandAll() {
        document.querySelectorAll(".e-n-accordion-item").forEach(function (accordionItem) {
            accordionItem.open = true;
        });
    }

    // Function to collapse all accordion panes
    function collapseAll() {
        document.querySelectorAll(".e-n-accordion-item").forEach(function (accordionItem) {
            accordionItem.open = false;
        });
    }

    // Find the existing buttons on the page
    var expandButton = document.querySelector(".expand-all");
    var collapseButton = document.querySelector(".collapse-all");

    // Add event listeners to the existing buttons
    if (expandButton) {
        expandButton.addEventListener("click", expandAll);
    }

    if (collapseButton) {
        collapseButton.addEventListener("click", collapseAll);
    }
});
  </script>