Необычный аккордеон на js

Question

Всем привет. Столкнулся впервые с таким фильтром. Кто-нибудь сталкивался с подобными аккордеонами?Пол дня сижу ломаю голову, не могу придумать как правильно его сверстать? Я сделал такую верстку, но что-то не то. Помогите пожалуйста.

<div class="accordion">
  <div class="accordion-item">
      <div class="accordion-header" id="accordionHeader1">
          <button class="accordion-button" aria-expanded="false">
              Верхняя одежда
              <img src="./img/icons/Icon_arrow-down.svg" class="accordion-arrow">
          </button>
          
      </div>
      <div class="accordion-content" aria-labelledby="accordionHeader1">
          <div class="categories">
              <button class="category">Жилетки</button>
              <button class="category">Пальто</button>
              <button class="category">Бомбер</button>
              <button class="category">Кожанын куртки</button>
              <button class="category">Пуховики</button>
              <button class="category">Тонкие куртки и ветровки</button>
          </div>
      </div>
  </div>
  <!-- Додайте інші акордеони за потреби тут -->
</div>

Answer 1

А как правильно сделать, чтоб при закрытом аккордеоне , список фильтров все равно отображался?

хм... если, [как я предполагаю], речь о выбранных фильтрах... я бы сделал как то так:

.cat:not(:checked) ~ *:not(:checked) + *{display: none}
.cat:not(:checked) + b:after{content: 'выбрано:'; float: right;}
.x > *{margin: .5em;}
.cat + b{grid-column: span 4}
.cat:checked ~ *:nth-child(even){grid-column: span 4}

.x{
  display: grid;
  margin: 1em;
  background: pink;
  grid-template-columns: repeat(5, 1fr);
}

<div class='x'>
  <input type='checkbox' class='cat' name='cat1'/><b>cat1 name V</b>
  <input type='checkbox' name='f1'/><i>f1 name</i>
  <input type='checkbox' name='f2' checked/><i>f2 name</i>
  <input type='checkbox' name='f3'/><i>f3 name</i>
  <input type='checkbox' name='f4' checked/><i>f4 name</i>
  <input type='checkbox' name='f5'/><i>f5 name</i>
</div>

<div class='x'>
  <input type='checkbox' class='cat' name='cat2'/><b>cat2 name V</b>
  <input type='checkbox' name='f1' checked/><i>f1 name</i>
  <input type='checkbox' name='f2'/><i>f2 name</i>
  <input type='checkbox' name='f3' checked/><i>f3 name</i>
  <input type='checkbox' name='f4'/><i>f4 name</i>
  <input type='checkbox' name='f5'/><i>f5 name</i>
</div>

<div class='x'>
  <input type='checkbox' class='cat' name='cat3'/><b>cat3 name V</b>
  <input type='checkbox' name='f1'/><i>f1 name</i>
  <input type='checkbox' name='f2' checked/><i>f2 name</i>
  <input type='checkbox' name='f3' checked/><i>f3 name</i>
  <input type='checkbox' name='f4' checked/><i>f4 name</i>
  <input type='checkbox' name='f5'/><i>f5 name</i>
</div>

не идеально конечно, но на ff 91 вполне работает. осталось только раскрасить по вкусу.

p.s. no one letter js code

Answer 2

Ребят, сделал вот такой вариант. Вроде похоже на то , что от меня требовалось. Единственное, немного подправлю верстку, стили и доделаю js, чтобы можно было выбрать несколько категорий из фильтров.

document.getElementById('accordionHeaderCustom').addEventListener('click', function() {
  const arrowIcon = document.querySelector('.arrow-icon-custom');
  const categoriesContainer = document.getElementById('categoriesContainerCustom');

  if (categoriesContainer.classList.contains('open')) {
    categoriesContainer.classList.remove('open');
    arrowIcon.classList.remove('open');
  } else {
    categoriesContainer.classList.add('open');
    arrowIcon.classList.add('open');
  }
});

.right-shop-filters-modal .accordion-custom {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.right-shop-filters-modal .accordion-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  cursor: pointer;
}

.right-shop-filters-modal .accordion-content-custom {
  padding: 10px;
  border-top: 1px solid #ddd;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  transition: max-height 0.3s ease;
}

.right-shop-filters-modal .arrow-icon-custom {
  transition: transform 0.3s;
}

.right-shop-filters-modal .arrow-icon-custom.open {
  transform: rotate(180deg);
}

.right-shop-filters-modal .categories-container-custom {
  display: flex;
  gap: 10px;
}

.right-shop-filters-modal .categories-container-custom.open {
  flex-wrap: wrap;
  white-space: normal;
  overflow-x: hidden;
}

.right-shop-filters-modal .category-custom {
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 4px;
}

<div class="accordion-custom">
  <div class="accordion-header-custom" id="accordionHeaderCustom">
    <span>Верхняя одежда</span>
    <img src="./img/icons/Icon_arrow-down.svg" alt="Arrow icon" class="arrow-icon-custom">
  </div>
  <div class="accordion-content-custom">
    <div class="categories-container-custom" id="categoriesContainerCustom">
      <div class="category-custom">Жилетки</div>
      <div class="category-custom">Пальто</div>
      <div class="category-custom">Бомбер</div>
      <div class="category-custom">Кожанын куртки</div>
      <div class="category-custom">Пуховики</div>
      <div class="category-custom">Тонкие куртки и ветровки</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Необычный аккордеон на js

Ответы (2 шт):