How to Disable Collapsible Categories on DX X-Admin Theme

Introduction

Learn how to disable the default collapsible behavior of categories in Joget's DX-Admin theme. By default, other categories collapse automatically when you click on a category. This behavior is not configurable through the UI settings, but you can achieve the desired result by adding custom JavaScript.

How does it work?

In the DX-Admin theme, categories in the left navigation panel automatically collapse when another category is clicked. This functionality can be overridden by injecting custom JavaScript into the UI Builder. The provided script prevents the categories from collapsing and allows them to remain open when clicked.

To disable the collapsible feature, follow these steps:

1. Go to UI Builder in your Joget app.
2. Go to Settings > Configure DX-X Admin > Advanced > Custom JavaScript.
3. Copy and paste the following JavaScript code:
   

   layui.use(["layer", "element", "jquery"], function () {
     $(".left-nav #nav").off("click");
     $(".left-nav #nav").on("click", "li", function (event) {
       $(".left-nav").find("a").removeClass("active");
       $(this).children("a").addClass("active");
       if ($(this).children(".sub-menu").length) {
         if ($(this).hasClass("open")) {
           $(this).removeClass("open");
           $(this).find(".nav_right").html("");
           $(this).children(".sub-menu").stop(true, true).slideUp();
         } else {
           $(this).addClass("open");
           $(this).children("a").find(".nav_right").html("");
           $(this).children(".sub-menu").stop(true, true).slideDown();
         }
       }
     });
   });

4. Save the changes and preview your app to ensure the categories no longer collapse when another category is clicked. 
   

Expected outcome

After implementing the custom JavaScript, categories in the DX-Admin theme will no longer collapse automatically when a different category is clicked. This ensures that all selected categories remain expanded, providing a more consistent user experience.

Download sample app