Collapsing Other Menu Categories When Opening a New One with JavaScript

Introduction

This article demonstrates on how to collapse other UI menu categories while opening a menu category with JavaScript.

How does it work?

1. In UI Builder, go to Settings Tab > Configure Layout > Configure Theme > Advanced > Scroll down to Custom JavaScript.

2. Add the script

 $(document).ready(function () {
        function initializeMenuToggle() {
            // Detach any previously attached event handlers to avoid duplication
            $(".category > a.dropdown").off("click").on("click", function (event) {
                event.preventDefault(); // Prevent default anchor behavior
                event.stopPropagation(); // Prevent event propagation
                var currentCategory = $(this).closest("li"); // Get the clicked category
                // Check if the clicked category is already expanded
                if (!currentCategory.hasClass("toggled")) {
                    // Collapse all other categories
                    $(".category.toggled").removeClass("toggled").find(".menu-container").slideUp();
                    // Expand the clicked category with animation
                    currentCategory.addClass("toggled").find(".menu-container").slideDown();
                } else {
                    // If clicked category is already expanded, collapse it with animation
                    currentCategory.removeClass("toggled").find(".menu-container").slideUp();
                }
            });
        }

        // Function to ensure menu toggle works after refresh or navigation
        function setupMenuToggle() {
            // Delay execution until all dynamic content is loaded
            if ($(".category > a.dropdown").length) {
                initializeMenuToggle(); // Attach the toggle behavior
            } else {
                // If menu items are not yet loaded, wait and retry
                setTimeout(setupMenuToggle, 100); // Retry every 100ms until elements are found
            }
        }

        // Trigger setup after page navigation
        $(document).on("page_loaded", function () {
            setupMenuToggle();
        });

        // Also run the setup once on initial page load
        setupMenuToggle();
    });

Expected Outcome