Всплывающий контент для разных разделов

При нажатии на кнопку всплывает меню

by head__space

HTML

<body>
  <!--Оболочка для демонстрации-->

  <!--  Каталог -->
    <section class="main-catalog">
      <div class="container">
        <div class="filters">
          <div class="filters__left">
              <span class="filters__name filter__one">Фильтры</span>
              <div class="wrap__filter ">
                <div class="color__list">
                  <h3>Цвет</h3>
                  <ul>
                    <li><a href="">Белый</a></li>
                    <li><a href="">Красный</a></li>
                    <li><a href="">Желтый</a></li>
                 
                  </ul>
                </div>
   
              </div>
          </div>
          <div class="filters__right">
            <div class="">
              <span class="filters__name filter__two">По популярности</span>
              <div class="wrap__filter1 ">
                <div class="color__list">
                </div>
                <div class="price__filter">
                </div>
              </div>
            </div>
            <div class="">

              <span class="filters__name filter__three">По цене</span>
              <div class="wrap__filter2 ">
                <div class="color__list">
                  <h3>Цвет</h3>
                </div>
                <div class="color__list">

                </div>
                <div class="color__list">
                  <h3>Размер</h3>
                </div>
                <div class="price__filter">
                  <h3>Цена</h3>
                </div>
              </div>
            </div>
            <div class="">
              <span class="filters__name filter__four">По новизне</span>
              <div class="wrap__filter3">
                <div class="color__list">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
</body>

CSS

.main-catalog__menu ul{
  display: flex;
  justify-content: space-around;
}
.main-catalog__menu a{
  font-style: italic;
  font-size: 24px;
  color: #868686;
}
.current a{
  color: #1D1D1D;
}
/*Фильтры*/
.filters {
  position: relative;
  padding-bottom: 22px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #D0D0D0;
}
.filters__left {
  posititon: relative;
}
.filters__right {
  display: flex;
  justify-content: space-between;
  width: 500px;
  padding-right: 10px;
}
.filters__name {
}
.filters span {
  position: relative;
  width: 100%;
  max-width: 150px;
  align-items: center;
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #1D1D1D;
}

.filters span::after {
  position: absolute;
  content: "";
  display: inline-block;
  vertical-align: middle;
  right: -9px;
  width: 9px;
  height: 9px;
  border-left: 1px solid #1D1D1D;
  border-bottom: 1px solid #1D1D1D;
  transform: rotate(-135deg);
  padding: 0;
  top: 3px;
  bottom: 0;
  margin: auto;
}
.filters span[open] > .filters span::after {
  transform: rotate( -45deg);
}
.wrap__filter {
  transition: all 1s;
  width: 430px;
  max-width: 1520px;
  margin: 0 auto;
  z-index: 10;
  padding: 60px 90px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 44px;
  left: 0;
  background: #FFFEFE;
  margin: 0 auto;
  border: 1px solid #D0D0D0;
  display: flex;
  justify-content: space-between;
}
.wrap__filter1 {
  background: #0c5460;
  width: 430px;
  max-width: 1520px;
  margin: 0 auto;
  z-index: 10;
  padding: 60px 90px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 44px;
  left: 0;
  margin: 0 auto;
  border: 1px solid #D0D0D0;
  display: flex;
  justify-content: space-between;
}
.wrap__filter2 {
  width: 430px;
  max-width: 1520px;
  margin: 0 auto;
  z-index: 10;
  padding: 60px 90px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 44px;
  left: 0;
  background: deeppink;
  margin: 0...

JavaScript

window.addEventListener('DOMContentLoaded', () => {
    const filter = document.querySelector('.filter__one')
    const filter1 = document.querySelector('.filter__two')
    const filter2 = document.querySelector('.filter__three')
    const filter3 = document.querySelector('.filter__four')
    const wrapFilter = document.querySelector('.wrap__filter')
    const wrapFilter1 = document.querySelector('.wrap__filter1')
    const wrapFilter2 = document.querySelector('.wrap__filter2')
    const wrapFilter3 = document.querySelector('.wrap__filter3')
    filter.addEventListener('click', () => {
        wrapFilter.classList.toggle('opened');
        wrapFilter1.classList.remove('opened');
        wrapFilter2.classList.remove('opened');
        wrapFilter3.classList.remove('opened');
    });
    filter1.addEventListener('click', () => {
        wrapFilter1.classList.toggle('opened');
        wrapFilter.classList.remove('opened');
        wrapFilter2.classList.remove('opened');
        wrapFilter3.classList.remove('opened');
    });
    filter2.addEventListener('click', () => {
        wrapFilter2.classList.toggle('opened');
        wrapFilter.classList.remove('opened');
        wrapFilter1.classList.remove('opened');
        wrapFilter3.classList.remove('opened');
    });
    filter3.addEventListener('click', () => {
        wrapFilter3.classList.toggle('opened');
        wrapFilter.classList.remove('opened');
        wrapFilter1.classList.remove('opened');
        wrapFilter2.classList.remove('opened');
    });
});