Clickable header link

JavaScript
1

hello forum,
so i have come across a teeny tiny issue with my js. link “account” in the header is suppose to bring out a drop down with options “sign in” “sign up”. the problem is not from the attached js file. it looks like its working just fine.

<div id="moreRight" class="moreRight">
                <section id="searchBar" class="searchBar header-search-bar" >
                    <input type="search" placeholder="Search Motgo..." id="searchBarInput" class="searchBarInput">
                    <button class="searchButton" id="searchButton">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
                </section>

                <div id="headerRight" class="headerRight">
                <section id="userAcc" class="userAcc">
                    <p id="userName" class="userName">Account</p>
                    <div id="profileImgCon" class="profileImgCon">
                        <svg width="" height="" id="userImg" class="userImg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="head" d="M22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 14.9 3.25 17.51 5.23 19.34C5.23 19.35 5.23 19.35 5.22 19.36C5.32 19.46 5.44 19.54 5.54 19.63C5.6 19.68 5.65 19.73 5.71 19.77C5.89 19.92 6.09 20.06 6.28 20.2C6.35 20.25 6.41 20.29 6.48 20.34C6.67 20.47 6.87 20.59 7.08 20.7C7.15 20.74 7.23 20.79 7.3 20.83C7.5 20.94 7.71 21.04 7.93 21.13C8.01 21.17 8.09 21.21 8.17 21.24C8.39 21.33 8.61 21.41 8.83 21.48C8.91 21.51 8.99 21.54 9.07 21.56C9.31 21.63 9.55 21.69 9.79 21.75C9.86 21.77 9.93 21.79 10.01 21.8C10.29 21.86 10.57 21.9 10.86 21.93C10.9 21.93 10.94 21.94 10.98 21.95C11.32 21.98 11.66 22 12 22C12.34 22 12.68 21.98 13.01 21.95C13.05 21.95 13.09 21.94 13.13 21.93C13.42 21.9 13.7 21.86 13.98 21.8C14.05 21.79 14.12 21.76 14.2 21.75C14.44 21.69 14.69 21.64 14.92 21.56C15 21.53 15.08 21.5 15.16 21.48C15.38 21.4 15.61 21.33 15.82 21.24C15.9 21.21 15.98 21.17 16.06 21.13C16.27 21.04 16.48 20.94 16.69 20.83C16.77 20.79 16.84 20.74 16.91 20.7C17.11 20.58 17.31 20.47 17.51 20.34C17.58 20.3 17.64 20.25 17.71 20.2C17.91 20.06 18.1 19.92 18.28 19.77C18.34 19.72 18.39 19.67 18.45 19.63C18.56 19.54 18.67 19.45 18.77 19.36C18.77 19.35 18.77 19.35 18.76 19.34C20.75 17.51 22 14.9 22 12ZM16.94 16.97C14.23 15.15 9.79 15.15 7.06 16.97C6.62 17.26 6.26 17.6 5.96 17.97C4.44 16.43 3.5 14.32 3.5 12C3.5 7.31 7.31 3.5 12 3.5C16.69 3.5 20.5 7.31 20.5 12C20.5 14.32 19.56 16.43 18.04 17.97C17.75 17.6 17.38 17.26 16.94 16.97Z" fill=""/>
                            <path class="body" d="M12 6.92969C9.93 6.92969 8.25 8.60969 8.25 10.6797C8.25 12.7097 9.84 14.3597 11.95 14.4197C11.98 14.4197 12.02 14.4197 12.04 14.4197C12.06 14.4197 12.09 14.4197 12.11 14.4197C12.12 14.4197 12.13 14.4197 12.13 14.4197C14.15 14.3497 15.74 12.7097 15.75 10.6797C15.75 8.60969 14.07 6.92969 12 6.92969Z" fill=""/>
                            </svg>
                    </div>
                    
                    <svg  id="moreSlide" class="moreSlide" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill="none" d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>

                       <div id="dropdownMenu" class="dropdown-content">
                        <a href="/signin.html">Sign In</a>
                        <a href="/signup.html">Sign Up</a>
                     </div>
                </section>

                <button id="helpSec" class="helpSec"><p class="helpText">Help</p>
                    <div id="helpIconDiv" class="helpIconDiv">
                        <svg width="" height="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="" stroke-width="2"/>
                            <path d="M10.5 8.67709C10.8665 8.26188 11.4027 8 12 8C13.1046 8 14 8.89543 14 10C14 10.9337 13.3601 11.718 12.4949 11.9383C12.2273 12.0064 12 12.2239 12 12.5V12.5V13" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 16H12.01" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                    </div>
                   <svg  class="moreSlide helpIcon"  id="helpIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    
                </button>

                <section id="cart" class="cart">
                    <p id="cartText" class="cartText">cart</p>
                    <div id="cartIconDiv" class="cartIconDiv">
                        <svg id="cartSVG" class="cartSVG" width="80px" height="80px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                            <circle cx="7.5" cy="18.5" r="1.5" fill=""/>
                            <circle cx="16.5" cy="18.5" r="1.5" fill=""/>
                            <path stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h2l.6 3m0 0L7 15h10l2-7H5.6z"/>
                          </svg>
                      </div>
                    <div id="cartNumItemDiv" class="cartNumItemDiv"><p id="cartNumItem" class="cartNumItem">5</p></div>
                </section>
                </div>
                </div>



 let userAcc = document.getElementById('userAcc');
document.getElementById("userAcc").addEventListener("click", function () {
    document.getElementById("dropdownMenu").classList.toggle("show");
  });

  // Close the dropdown if clicked outside
  window.addEventListener("click", function (event) {
    if (!event.target.matches('.userAcc')) {
      const dropdown = document.getElementById("dropdownMenu");
      if (dropdown.classList.contains("show")) {
        dropdown.classList.remove("show");
      }
    }
  });
2

best to share the code in a codepen or in a live site so we can debug with you.

3

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').