Alternar menú desplegable rotar flecha

Question

Tengo dos menús desplegables que están ocultos. Se muestran una vez que el usuario hace clic en uno de ellos. cuando un menú desplegable está abierto, cierra el otro. Este trabajo hasta ahora todo bien. Agregué un símbolo de intercalación SVG a cada menú y se gira hacia abajo (90 grados) cuando el usuario hace clic en un menú.

¿Cómo puedo girarlo de nuevo a su lugar inicial (-360 grados) cuando hay otro menú abierto?

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    var dropdownContent = this.nextElementSibling;

    Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
      if (el !== dropdownContent)
        el.style.display = 'none';
        /* if its possible rotate it back here, i couldnt access the carets here */
    });

    if (dropdownContent.style.display === "block")
      dropdownContent.style.display = "none";
    else
      dropdownContent.style.display = "block";
  });
}

.dropdown-btn {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-family: LinetoCircular;
  display: block;
  padding-left: 20px;
  z-index: 0;
}

#wrapper {
  display: flex;
}

/* hidden by default, make the content shifts under the title */
.dropdown-container {
  display: none;
  font-size: 18px;
  padding-top: 10px;
  background-color: #575757;
}

.dropdown-container a {
  color: white;
  padding-left: 30px;
}

.dropdown-container a:hover {
  background-color: #414141;
}

<div>
  <button class="dropdown-btn">
      <div id="wrapper">
          <div>Client</div>
          <div id="rotate1" class="transformButton" style="position: relative; left: 104px; top: 2px;"><!--this is the caret, may not be visible because its local--></div>
      </div>
  </button>
  <div class="dropdown-container">
    <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
    <a href=''>first element</a><br>
    <a href=''>second element</a><br>
  </div>
  <div>
      <button class="dropdown-btn">
          <div id="wrapper">
              <div>Car</div>
              <div id="rotate2" class="transformButton" style="position: relative; left: 104px; top: 2px;"><!--this is the caret, may not be visible because its local--> </div>
          </div>
      </button>
  </div>
    <div class="dropdown-container">
      <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
      <a href=''>first element</a><br>
      <a href=''>second element</a><br>
    </div>
</div>

Caret es invisible aquí, pero escribí el para él. Debería estar junto a cada menú desplegable. Demo en vivo:https://jsfiddle.net/2mwr4y68/

Answer 1

Todo lo que necesitas es

• agregue una clase a los contenedores, es decir: class="dropdown"
• Cree una clase CSS .is-openque se agregará a los contenedores
• Alternar esa clase usando JS

const dropdowns = document.querySelectorAll(".dropdown");

dropdowns.forEach(el => {

  const button = el.querySelector(".dropdown-btn");
  
  button.addEventListener("click", () => {
    // Close all
    [...dropdowns].filter(x => x != el).forEach(el => el.classList.remove("is-open"));
    // Toggle one
    el.classList.toggle("is-open");
  });
});

/*QuickReset*/ * {margin:0; box-sizing:border-box;font:14px/1.4 sans-serif;}

.dropdown-btn {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-family: inherit;
  display: block;
}

.dropdown-btn::before {
  display: inline-block;
  content: "\25BC";
  transition: transform 0.3s;
}

.dropdown-container {
  display: none;
  padding: 10px;
  background-color: #575757;
}

.dropdown.is-open .dropdown-btn:before {
  transform: rotate(180deg);
}

.dropdown.is-open .dropdown-container {
  display: block;
}

.dropdown-container a {
  color: white;
  display: block;
}

.dropdown-container a:hover {
  background-color: #414141;
}

<div class="dropdown">
  <button class="dropdown-btn">Client</button>
  <div class="dropdown-container">
    <a href="client_properties/"><span>+</span>Add new</a>
    <a href=''>first element</a>
    <a href=''>second element</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropdown-btn">Car</button>
  <div class="dropdown-container">
    <a href="client_properties/"><span>+</span>Add new</a>
    <a href=''>first element</a>
    <a href=''>second element</a>
  </div>
</div>

Lo anterior no está destinado a funcionar con varios grupos de colección de .dropdown
Si ese es el caso, ajuste lo anterior para tener en cuenta los grupos de .dropdowns