Close dropdown upon clicking another

Question

I a working on a to make a reponsive dropdown navigation bar with vanilla JavaScript. In mobile view I want that upon click one dropdown the another should close. JavaScript here:

dropbtns.forEach(link => {
  link.addEventListener("click", function(e) {
    e.currentTarget.nextElementSibling.classList.toggle("showdd");
  });
});

and show dropdown:

  .showdd {
    height: auto;
  }

html code:

<div class="nav-container">
    <div class="brand">
        <a href="#!">Logo</a>
    </div>
    <nav>
        <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
        <ul id="nav-list">
            <li>
                <a href="#!">Home</a>
            </li>
            <li>
                <a href="#!">About</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Pricing</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Contact</a>
            </li>
        </ul>
    </nav>
</div>

full code can be find here.

Answer 1

So, if you want to collapse all other .nav-dropdown when one is being clicked on, you simply will need to:

1. Store the reference of the .nav-dropdown of the current element (for comparison later)
2. Toggle its class (as you're doing already)
3. Go through all other .nav-dropdown in your DOM tree and iterate through them. If they do not match the current reference, then you know the dropdown belongs to another link and you can remove the class

With that in mind we arrive at the code below:

dropbtns.forEach(link => {
  link.addEventListener('click', e => {
    const ownDropdown = e.currentTarget.nextElementSibling;
    ownDropdown.classList.toggle('showdd');

    document.querySelectorAll('.dropbtn + .nav-dropdown').forEach(el => {
      if (el !== ownDropdown)
        el.classList.remove('showdd');
    });
  });
});

Answer 2

It works on your Codepen after I edit the following line.

links.forEach(link => {
  link.addEventListener("click", function(e) {
    links.forEach(link => {
      link.nextElementSibling.classList.remove("showdd"); // Here
    });
    e.currentTarget.nextElementSibling.classList.toggle("show");
  });
});

By the way, what is "showdd"?