How to allow only one dropdown to be open - javascript

I have a dropdown I made with HTML, CSS, and JavaScript. When I click on an element with filter-dropdown-btn, it opens the element after it with a class filter-dropdown-content by adding the class active-dropdown to the filter-dropdown-content class; and also rotates the arrow icon by adding the class active-chevron to it.

How do I make only one dropdown open at a time? and after clicking on another dropdown, the formerly opened dropdown automatically closes.

let filterDropdown = document.querySelectorAll(".filter-dropdown-btn");
filterDropdown.forEach((item) => {
  item.addEventListener("click", function() {
    // remove .active-dropdown from all dropdowns
    let dropdowns = document.querySelectorAll(".filter-dropdown-content");
    dropdowns.forEach((item) => {
      item.classList.remove("active-dropdown");
    });
    // remove .active-chevron from all buttons
    let dropdownIcons = document.querySelectorAll(".filter-dropdown-icon");
    dropdownIcons.forEach((item) => {
      item.classList.remove("active-chevron");
    });
    let dropdownContent = this.nextElementSibling;
    dropdownContent.classList.toggle("active-dropdown");
    let dropdownIcon = this.children[0];
    dropdownIcon.classList.toggle("active-chevron");
  });
});

body {
  background-color: #100420;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: white;
}

.dropdown-item {
  position: relative;
}

.dropdown-content {
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  top: 125%;
  background: #342a41;
  width: auto;
  border-radius: 10px;
  transform: translateX(10%);
  min-width: 150px;
}

.dropdown-content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 5px solid #342a41;
}

.dropdown-content li {
  padding-inline: 1rem;
  margin-block: 0.75rem;
  color: #fff;
}

.dropdown-content hr {
  border-top: 0.1rem solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

.filter__dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: #fff;
}

.filter__dropdown .filter-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 15px;
  color: #fff;
  background-color: rgba(238, 225, 255, 0.13);
  cursor: pointer;
  gap: 1rem;
}

.filter__dropdown .filter-dropdown-btn:hover {
  background-color: rgba(238, 225, 255, 0.2);
}

.dropdown-content.active-dropdown {
  display: block;
}

.filter-dropdown-icon.active-chevron {
  transform: rotate(180deg);
}

<!-- Font Awesome Kit -->
<script src="https://kit.fontawesome.com/d778668bce.js" crossorigin="anonymous" defer></script>

<div class="filter__dropdown">
  <!-- Dropdown Item -->
  <div class="dropdown-item">
    <button type="button" class="filter-dropdown-btn">
      Loan amount <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
    </button>
    <div class="dropdown-content filter-dropdown-content">
      <ul>
        <li>
          <a href="javascript:">All</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">0 - 1000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">1000 - 10000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">10000 - 100000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">100000 - 1000000</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown Item -->
  <div class="dropdown-item">
    <button type="button" class="filter-dropdown-btn">
      Collections <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
    </button>
    <div class="dropdown-content filter-dropdown-content">
      <ul>
        <li>
          <a href="javascript:">All</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">0 - 1000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">1000 - 10000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">10000 - 100000</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">100000 - 1000000</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown Item -->
  <div class="dropdown-item">
    <button type="button" class="filter-dropdown-btn">
      Total interest
      <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
    </button>
    <div class="dropdown-content filter-dropdown-content">
      <ul>
        <li>
          <a href="javascript:">All</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">5 SOL</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">10 SOL</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">20 SOL</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">50 SOL</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown Item -->
  <div class="dropdown-item">
    <button type="button" class="filter-dropdown-btn">
      Return rate <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
    </button>
    <div class="dropdown-content filter-dropdown-content">
      <ul>
        <li>
          <a href="javascript:">All</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">1%</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">10%</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">20%</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">40%</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown Item -->
  <div class="dropdown-item">
    <button type="button" class="filter-dropdown-btn">
      Loan duration
      <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
    </button>
    <div class="dropdown-content filter-dropdown-content">
      <ul>
        <li>
          <a href="javascript:">All</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">2 days</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">4 days</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">10 days</a>
        </li>
        <hr />
        <li>
          <a href="javascript:">More than 20 days</a>
        </li>
      </ul>
    </div>
    <!-- Dropdown Item -->
  </div>
</div>

Solution

Your code works fine for me when I am testing, although I had to add some CSS which I guess you just missed adding to the question.

.dropdown-content.active-dropdown {
  display: block;
}

.filter-dropdown-icon.active-chevron {
  transform: rotate(180deg);
}

Test this snippet and see the results.

    let filterDropdown = document.querySelectorAll(".filter-dropdown-btn");
    filterDropdown.forEach((item) => {
      item.addEventListener("click", function () {
        // remove .active-dropdown from all dropdowns
        let dropdowns = document.querySelectorAll(".filter-dropdown-content");
        dropdowns.forEach((item) => {
          item.classList.remove("active-dropdown");
        });
        // remove .active-chevron from all buttons
        let dropdownIcons = document.querySelectorAll(".filter-dropdown-icon");
        dropdownIcons.forEach((item) => {
          item.classList.remove("active-chevron");
        });
        let dropdownContent = this.nextElementSibling;
        dropdownContent.classList.toggle("active-dropdown");
        let dropdownIcon = this.children[0];
        dropdownIcon.classList.toggle("active-chevron");
      });
    });

body {
  background-color: #100420;
}

li {
  list-style-type: none;
}

.dropdown-item {
  position: relative;
}

.dropdown-content {
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  top: 125%;
  background: #342a41;
  width: auto;
  border-radius: 10px;
  transform: translateX(10%);
  min-width: 150px;
}


.dropdown-content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 5px solid #342a41;
}

.dropdown-content li {
  padding-inline: 1rem;
  margin-block: 0.75rem;
  color: #fff;
}

.dropdown-content hr {
  border-top: 0.1rem solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
}

.filter__dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: #fff;
}

.filter__dropdown .filter-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 15px;
  color: #fff;
  background-color: rgba(238, 225, 255, 0.13);
  cursor: pointer;
  gap: 1rem;
}

.filter__dropdown .filter-dropdown-btn:hover {
  background-color: rgba(238, 225, 255, 0.2);
}


.dropdown-content.active-dropdown {
  display: block;
}

.filter-dropdown-icon.active-chevron {
  transform: rotate(180deg);
}

<html>

<head>
  <script src="https://kit.fontawesome.com/d778668bce.js" crossorigin="anonymous" defer></script>
</head>

<body>
  <div class="filter__dropdown">
    <!-- Dropdown Item -->
    <div class="dropdown-item">
      <button type="button" class="filter-dropdown-btn">
        Loan amount <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
      </button>
      <div class="dropdown-content filter-dropdown-content">
        <ul>
          <li>
            <a href="javascript:">All</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">0 - 1000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">1000 - 10000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">10000 - 100000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">100000 - 1000000</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Dropdown Item -->
    <div class="dropdown-item">
      <button type="button" class="filter-dropdown-btn">
        Collections <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
      </button>
      <div class="dropdown-content filter-dropdown-content">
        <ul>
          <li>
            <a href="javascript:">All</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">0 - 1000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">1000 - 10000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">10000 - 100000</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">100000 - 1000000</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Dropdown Item -->
    <div class="dropdown-item">
      <button type="button" class="filter-dropdown-btn">
        Total interest
        <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
      </button>
      <div class="dropdown-content filter-dropdown-content">
        <ul>
          <li>
            <a href="javascript:">All</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">5 SOL</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">10 SOL</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">20 SOL</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">50 SOL</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Dropdown Item -->
    <div class="dropdown-item">
      <button type="button" class="filter-dropdown-btn">
        Return rate <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
      </button>
      <div class="dropdown-content filter-dropdown-content">
        <ul>
          <li>
            <a href="javascript:">All</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">1%</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">10%</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">20%</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">40%</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Dropdown Item -->
    <div class="dropdown-item">
      <button type="button" class="filter-dropdown-btn">
        Loan duration
        <i class="fa-solid fa-chevron-down fa-xs filter-dropdown-icon"></i>
      </button>
      <div class="dropdown-content filter-dropdown-content">
        <ul>
          <li>
            <a href="javascript:">All</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">2 days</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">4 days</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">10 days</a>
          </li>
          <hr />
          <li>
            <a href="javascript:">More than 20 days</a>
          </li>
        </ul>
      </div>
      <!-- Dropdown Item -->
    </div>
  </div>
</body>

</html>