Member Avatar for Ardi Daullja

Hi everybody,
Im developing one html and i need to display submenu
how can i change the id aria-hidden true to false and vice versa when i click the button?
Thank you

                      <div class="wprw9j-0 hFDMkC" id="navbar-subnav-menu" aria-hidden="true">
                        <div class="dgf6n9-0 dAiGqK">
                          <ul class="dgf6n9-2 csTLEY">
                            <li class="dgf6n9-1 izNbxb"><a class="sc-5f33yf-1 sc-12r7gm-2 fOFqvA sc-5f33yf-2 NHJnw"
                                href="home.html"><span class="sc-5f33yf-0 hLgzcu"><img
                                    src="assets/logos/home-w.svg" alt="Home" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /><img
                                    src="assets/logos/home.svg" alt="Home" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /></span></a></li>
                            <li class="dgf6n9-1 izNbxb"><a class="sc-5f33yf-1 sc-12r7gm-2 fOFqvA sc-5f33yf-2 NHJnw"
                                href="about.html"><span class="sc-5f33yf-0 hLgzcu"><img
                                    src="assets/logos/w9_ghost-b1bab2947b.svg" alt="About" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /><img
                                    src="assets/logos/about.svg" alt="About" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /></span></a></li>
                            <li class="dgf6n9-1 izNbxb"><a class="sc-5f33yf-1 sc-12r7gm-2 fOFqvA sc-5f33yf-2 NHJnw"
                                href="contact.html"><span class="sc-5f33yf-0 hLgzcu"><img
                                    src="assets/logos/contact-w" alt="Contact" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /><img
                                    src="assets/logos/contact.svg" alt="Contact" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /></span></a></li>
                            <li class="dgf6n9-1 izNbxb"><a class="sc-5f33yf-1 sc-12r7gm-2 fOFqvA sc-5f33yf-2 NHJnw"
                                href="blog.html"><span class="sc-5f33yf-0 hLgzcu"><img
                                    src="assets/logos/blog-w.svg" alt="Blog" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /><img
                                    src="assets/logos/blog.svg" alt="Blog" height="24"
                                    class="sc-12r7gm-0 fjqWqA hfbp74-0 iwdxVb" /></span></a></li>
                          </ul>
                        </div>
                      </div>
  • 3 Contributors
  • 2 Replies
  • 548 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Note: the word "alse" in the thread title is a typo for "false". 's plain-JS approach is fine; 's question about jQuery is reasonable too. Below is a slightly more robust, accessible pattern that keeps visual state (CSS class) and ARIA state (on both the toggle and the menu) in sync, plus minimal keyboard/focus handling.

// example (put after the DOM or inside DOMContentLoaded)
const toggle = document.getElementById('menuToggle');
const menu = document.getElementById('navbar-subnav-menu');

toggle.addEventListener('click', () => {
  const open = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!open));
  menu.setAttribute('aria-hidden', String(open));        // opposite of expanded
  menu.classList.toggle('is-open', !open);               // control CSS visibility

  if (!open) {
    const first = menu.querySelector('a, button, [tabindex]:not([tabindex="-1"])');
    if (first) first.focus();
  } else {
    toggle.focus();
  }
});

document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') toggle.click();
});

Notes and troubleshooting

  • Keep visual hiding in CSS (e.g., .is-open { display:block }) and use ARIA only for assistive tech; keep them synchronized.
  • Update the toggle button with aria-expanded and aria-controls so screen readers know the relationship.
  • aria-hidden="true" does not automatically remove keyboard focus; use inert (with polyfill) or set tabindex="-1" on interactive children when hiding, or move focus away as shown.
  • If using a framework (React/Vue/Angular), change component state rather than manually mutating DOM attributes to avoid being overwritten.
  • Typical issues: wrong element ID, script running before DOM, or misspelling "false"/"true" (strings are important).

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia 
<button onclick="toggleHidden('navbar-subnav-menu')">button</button>

<script>
    function toggleHidden(id) {
      var attr = document.getElementById(id).attributes;

      if (attr['aria-hidden'].value == "true") {
        document.getElementById(id).setAttribute("aria-hidden", "false");
      } else {
        document.getElementById(id).setAttribute("aria-hidden", "true");
      }
    }
</script>
Member Avatar for Dani

The above code will let you do it with plain javascript. Are you using something like jQuery by any chance?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.