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>

Recommended Answers

All 2 Replies

<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>

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.