[Mobile Nav] Added sliding effect and allowed multiple open accordions

network-api/networkapi/templates/fragments/blocks/nav/dropdown.html

@@ -1,9 +1,9 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto{% endfragment %}
+{% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto tw-transition-all tw-duration-500{% endfragment %}
 {% fragment as dropdown_selector_base %}tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-py-12 tw-px-8 tw-gap-4{% endfragment %}
 
-{% fragment as content_desktop %}large:tw-max-w-[1250px] xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] large:tw-w-full large:tw-px-24 large:tw-hidden{% endfragment %}
+{% fragment as content_desktop %}large:tw-max-w-[1250px] xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] large:tw-w-full large:tw-px-24 large:tw-grid large:tw-duration-100 large:tw-invisible large:tw-opacity-0{% endfragment %}
 {% fragment as content_desktop_border %}large:tw-border large:tw-border-gray-20{% endfragment %}
 {% comment %} 40 (5rem) is the height of the navbar {% endcomment %}
 {% fragment as content_desktop_positioning %}large:tw-fixed large:tw-top-40 large:tw-left-0 large:tw-right-0 large:tw-mx-auto{% endfragment %}

source/js/components/accordion/accordion.js

@@ -16,7 +16,7 @@ class Accordion {
   bindEvents() {
     this.title.addEventListener("click", (e) => {
       e.preventDefault();
-      let open = !this.content.classList.contains("tw-hidden");
+      let open = this.title.getAttribute("aria-expanded") === "true";
 
       if (open) {
         this.close();
@@ -37,14 +37,12 @@ class Accordion {
   }
 
   open() {
-    this.content.classList.remove("tw-hidden");
     this.chevron.classList.remove("tw-rotate-180");
     this.title.setAttribute("aria-expanded", "true");
     this.content.setAttribute("aria-hidden", "false");
   }
 
   close() {
-    this.content.classList.add("tw-hidden");
     this.chevron.classList.add("tw-rotate-180");
     this.title.setAttribute("aria-expanded", "false");
     this.content.setAttribute("aria-hidden", "true");

source/js/components/nav/desktop-dropdown.js

@@ -63,8 +63,9 @@ class NavDesktopDropdown extends Accordion {
     this.titleText.classList.add("large:tw-border-black");
     this.titleText.classList.remove("large:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "true");
-    this.content.classList.add("large:tw-grid");
-    this.content.classList.remove("large:tw-hidden");
+    this.content.classList.remove("large:tw-opacity-0", "large:tw-invisible");
+    this.content.classList.add("large:tw-opacity-100", "large:tw-visible");
+
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingOpenStyles();
     }
@@ -93,8 +94,8 @@ class NavDesktopDropdown extends Accordion {
     this.titleText.classList.remove("large:tw-border-black");
     this.titleText.classList.add("large:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "false");
-    this.content.classList.remove("large:tw-grid");
-    this.content.classList.add("large:tw-hidden");
+    this.content.classList.remove("large:tw-opacity-100", "large:tw-visible");
+    this.content.classList.add("large:tw-opacity-0", "large:tw-invisible");
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingClosedStyles();
     }

source/js/components/nav/mobile-dropdown.js

@@ -27,9 +27,10 @@ class NavMobileDropdown extends Accordion {
     this.title.classList.add("tw-border-s-4");
   }
 
-  getSiblings() {
-    let siblings = document.querySelectorAll(NavMobileDropdown.selector());
-    return Array.from(siblings).filter((sibling) => sibling !== this.accordion);
+  getOpenSibling() {
+    return document
+      .querySelector(`${NavMobileDropdown.selector()} [aria-expanded="true"]`)
+      ?.closest(NavMobileDropdown.selector());
   }
 
   bindEvents() {
@@ -63,30 +64,37 @@ class NavMobileDropdown extends Accordion {
   }
 
   open() {
-    super.open();
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingOpenStyles();
     }
-    if (!this.siblings) {
-      this.siblings = this.getSiblings();
-    }
-    this.siblings.forEach((sibling) => {
-      const title = sibling.querySelector("[data-accordion-title]");
-      const chevron = sibling.querySelector("[data-accordion-title] img");
-      const content = sibling.querySelector("[data-accordion-content]");
+
+    let openAccordion = this.getOpenSibling();
+    if (openAccordion) {
+      const title = openAccordion.querySelector("[data-accordion-title]");
+      const chevron = openAccordion.querySelector("[data-accordion-title] img");
+      const content = openAccordion.querySelector("[data-accordion-content]");
       title.setAttribute("aria-expanded", "false");
       content.setAttribute("aria-hidden", "true");
-      content.classList.add("tw-hidden");
       chevron.classList.add("tw-rotate-180");
-    });
-    this.title.scrollIntoView({ behavior: "smooth", block: "start" });
+      content.style.height = "0";
+    }
+
+    super.open();
+    let transitionEndHandler = () => {
+      this.title.scrollIntoView({ behavior: "smooth", block: "start" });
+      this.content.removeEventListener("transitionend", transitionEndHandler);
+    };
+
+    this.content.addEventListener("transitionend", transitionEndHandler);
+    this.content.style.height = `${this.content.scrollHeight}px`;
   }
 
   close() {
     super.close();
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingClosedStyles();
     }
+    this.content.style.height = "0";
   }
 }