Collapsible Category

<script>
  (function () {
    const headEl = document.querySelector("head");
    const linkEl = document.createElement("link");
    const style = document.createElement("style");
 
    style.innerHTML = `
    .category-contents {
     border-radius: 8px !important;
    }
    
    
    .category-contents.category-active {
     padding-top: 0 !important;
     padding-bottom: 0 !important; 
     border-radius: 8px !important;
    }
    
    
    .category-contents{
      box-shadow: 0 0 2px #ccc!important;
      background-color: #fff!important;
    }
    
    .category-contents:not(:first-child){
      margin-top: 20px!important;
    }
    
    
    .category-post-list-container{
      background-color: transparent !important;
      padding: 0 1rem !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      box-shadow: none !important;
    }
    
    .course-section{
      background-color: transparent;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
    }
    
    .headline-active .category-title {
      pointer-events: none !important;
    }
    
    .category-contents > .headline-active {
     width: 100% !important;
     padding-top: 20px !important;
     padding-bottom: 20px !important;
     cursor:pointer !important;
     position: relative !important;
    }
    
    .category-contents > .headline-active::before {
     content: "\\f068" !important;
     position: absolute !important;
     width: 20px !important;
     height: 20px !important;
     right: 20px !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     font-family: "Font Awesome 5 Free" !important;
     font-size: 18px !important;
     font-weight: 700 !important;
     color: #000 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     margin: 0 auto !important;
    }
    
    body .category-contents.category-active > .headline-active::before {
     content: "\\f067" !important;
    }
    
    .category-contents.category-active > div:last-child{
      max-height: 0 !important;
      overflow: hidden !important;
      transition: all 0.3s ease-in !important;
    }
    
    .category-contents > div:last-child {
      transition: all 0.3s ease-in !important;
      max-height: 1400px !important;
    }
    `;
  
    linkEl.rel = "stylesheet";
    linkEl.href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
  
    headEl.appendChild(linkEl);
    headEl.appendChild(style);
    const app = document.querySelector("#app");
  
    const getEl = (selector) => {
      let intervalId;
      return new Promise((resolve, reject) => {
        intervalId = setInterval(() => {
          const el = document.querySelector(selector);
          if (el) {
  
            clearInterval(intervalId);
            resolve(el);
          }
        }, 300);
        setTimeout(() => {
          clearInterval(intervalId);
        }, 10000);
      });
    };
  
    const updateStyle = async (itemList = []) => {
   
      const activeCategory = document.querySelectorAll(".category-active");
      if (activeCategory.length > 0) return;
      if (itemList.length < 0) return;
  
      itemList.forEach((item) => {
        item.classList.add("category-active");
        item.firstElementChild.classList.add("headline-active");
        item.firstElementChild.classList.add("content-active");
        item.firstElementChild.addEventListener("click", (e) => {
          itemList.forEach((item) => {
            if (
              !item.classList.contains("category-active") &&
              e.currentTarget.classList.contains("content-active")
            ) {
              item.classList.add("category-active");
              item.firstElementChild.classList.add("content-active");
            }
          });
          if (!e.currentTarget.classList.contains("content-active")) {
            e.currentTarget.classList.add("content-active");
            e.currentTarget.parentElement.classList.add("category-active");
          } else {
            e.currentTarget.classList.remove("content-active");
            e.currentTarget.parentElement.classList.remove("category-active");
          }
        });
      });
    };
  
    const checkProduct = async () => {
      const productContainer = await getEl("#product-details-container");
      if (!productContainer) return;
  
      const category = [
        ...productContainer.querySelectorAll(".course-section > .category-post-list > .category-contents"),
      ];
      console.log(category);
    
      if (category) return updateStyle(category);
    };
  
    const runCustomCode = () => {
      checkProduct();
    };
  
    let pathname = "";
    window.addEventListener("DOMNodeInserted", (e) => {
   
      if (pathname == location.pathname) return;
      pathname = location.pathname;
      runCustomCode(pathname);
    });
  })();
  


</script>

Add the code into Settings >> Site Details >> Advanced >> Tracking Code >> Header Code