[lev90]

Добрый вечер!

Я новичок в javascript. Есть рабочий скрипт выпадающих списков. Всем хорош, кроме того, что не закрывает предыдущий список, после клика по соседнему или клика вне списков.
Подскажите пожалуйста, как можно сюда добавить закрытие списков по клику вне списка или по следующему списку.

Заранее всем спасибо!

const selectedAll = document.querySelectorAll(".selected");

selectedAll.forEach(selected => {
const optionsContainer = selected.previousElementSibling;
const optionsList = optionsContainer.querySelectorAll(".option");

 selected.addEventListener("click", () => {
   if (optionsContainer.classList.contains("active")) {
       optionsContainer.classList.remove("active");
        } else {
      let currentActive = document.querySelector("options-container.active");

 if (currentActive) {
    currentActive.classList.remove("active");
   }
    optionsContainer.classList.add("active");
   }
})

   optionsList.forEach(o => {
     o.addEventListener("click", () => {
       selected.innerHTML = o.querySelector("label").innerHTML;
       optionsContainer.classList.remove("active");
     });
   });
})

<div class="select-box">
   <div class="options-container">
      <div class="option">
         <label for="automobiles2" class="button_cost">
              <input type="radio" class="radio" value="" id="automobiles2" name="category2" />
               All</label>
      </div>

      <div class="option">
         <label for="film2" class="button_cost">
            <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> 
             Film Animation</label>
      </div>

      <div class="option">
         <label for="science2" class="button_cost">
            <input type="radio" class="radio" value=".uuu" id="science2" name="category2" />
             Science Technology</label>
      </div>

   <div class="selected">
      Select Video Category
   </div>
</div>

.select-box {
  position: relative;
  display: flex;
  width: 400px;
  flex-direction: column;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;

  order: 1;

  position: absolute;
  z-index: 100;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;

  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  margin-top: 104px;
}

.select-box .options-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}

/* Searchbox */

.search-box input {
  width: 100%;
  padding: 12px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: absolute;
  border-radius: 8px 8px 0 0;
  z-index: 100;
  border: 8px solid #2f3640;

  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}

.search-box input:focus {
  outline: none;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}