Dropdown Menu Toggle Rotate Arrow

I have two dropdown menus which are hidden. They are displayed once the user clicks one of them. when one dropdown menu is open, it closes the other one. This work so far so good.

Solution 1:

All you need is to

• add a class to the wrappers i.e: class="dropdown"
• Create a CSS class .is-open that will be added to the wrappers
• Toggle that class using 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-containera {
  color: white;
  display: block;
}

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

<divclass="dropdown"><buttonclass="dropdown-btn">Client</button><divclass="dropdown-container"><ahref="client_properties/"><span>+</span>Add new</a><ahref=''>first element</a><ahref=''>second element</a></div></div><divclass="dropdown"><buttonclass="dropdown-btn">Car</button><divclass="dropdown-container"><ahref="client_properties/"><span>+</span>Add new</a><ahref=''>first element</a><ahref=''>second element</a></div></div>

The above is not intended to work with multiple collection-groups of .dropdown If that's the case, wrap the above to account for groups of .dropdowns