title: Utility function to toggle ARIA and data attributes, and manage CSS classes on HTML dropdowns
body: <p>I have a dropdown utility function that is mostly working. The issues are with properly handling the toggling of the <code>data-text</code> and <code>aria</code> attributes for the buttons when clicking on the non-target button or outside the target element completely.</p>
  <p>I have included my <code>window.addEventListener</code> code, but have commented it out as it is affecting the display of the <code>ul</code> sub menu elements.</p>
  <p>I am learning vanilla JavaScript in bits and pieces, so please provide tips and solutions that are simple for a novice JS developer. Thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const navUtility = (() =&gt; {
    const buttons = document.querySelectorAll("[data-nav-toggle]");
    const containers = document.querySelectorAll("[data-nav-container]");
  
    if (!buttons) {
      return;
    }
  
    function dropdownToggleHandler() {
      buttons.forEach((button) =&gt; {
        button.addEventListener("click", toggleContainer);
      });
    }
  
    function toggleContainer(e) {
      toggleButtonClass(e.target);
      toggleButtonAria(e.target);
      toggleButtonDataText(e.target);
      toggleContainers(e.target);
    }
  
    function toggleButtonClass(button) {
      if (button.classList.contains("is-active")) {
        button.classList.remove("is-active");
      } else {
        button.classList.add("is-active");
      }
    }
  
    function toggleButtonAria(button) {
      const expandedValue = button.getAttribute("aria-expanded");
      const setValue = expandedValue === "true" ? "false" : "true";
      button.setAttribute("aria-expanded", setValue);
    }
  
    function toggleButtonDataText(button) {
      const originalValue = button.getAttribute("data-text-original");
      const swapValue = button.getAttribute("data-text-swap");
      if (swapValue === button.textContent) {
        button.textContent = button.getAttribute("data-text-original");
      } else {
        button.setAttribute("data-text-original", button.textContent);
        button.textContent = button.getAttribute("data-text-swap");
      }
    }
  
    function toggleContainers(button) {
      const parent = button.closest("[data-nav-container]");
      parent.classList.toggle("is-expanded");
      document.querySelectorAll(".is-expanded").forEach(function(parentExpanded) {
        if (parentExpanded !== parent) {
          parentExpanded.classList.remove("is-expanded");
        }
      });
    }
  
    dropdownToggleHandler();
  
    /* window.addEventListener('click', function(e) {
      containers.forEach((container) =&gt; {
        if (e.target !== container) {
          container.classList.remove("is-expanded");
        }
      });
    }); */
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    position: relative;
  }
  
  nav&gt;ul {
    width: 21rem;
    max-height: 0;
    position: absolute;
    right: auto;
    left: 0;
    z-index: 5;
    visibility: hidden;
    background-color: grey;
    transition: max-height 200ms ease-out;
  }
  
  nav.is-expanded&gt;ul {
    max-height: 4000px;
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="" data-nav-container="want-to-navigation" aria-label="Site tools navigation"&gt;
    &lt;button aria-expanded="false" class="" data-nav-toggle="want-to-navigation" data-text-swap="Close" data-text-original="I Want To..."&gt;Close&lt;/button&gt;
    &lt;ul id="want-to-navigation" class="menu"&gt;
      &lt;li&gt;
        &lt;a&gt;Apply For&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Development Permits&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Dust Suppressant&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Fire Permit&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Employment&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Subdivision&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav class="" data-nav-container="quick-links-navigation" aria-label="Site quick links navigation"&gt;
    &lt;button aria-expanded="false" class="" data-nav-toggle="quick-links-navigation" data-text-swap="Close" data-text-original="Quicklinks"&gt;Close&lt;/button&gt;
    &lt;ul id="quick-links-navigation"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Community Guide&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Notice of Development&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Workshops &amp;amp; Courses&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Council Business&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>