Как сделать сворачивание вкладки?

Question

[Olga17527]

Я не могу понять как сделать так, чтобы когда пользователь выбирал позицию из выпадающего списка, то список сворачивался. Как это реализовать?

HTML

<div class="accordion">
            <!-- Size -->
            <hr class="accordion-hr">
            <div class="accordion__item accordion__item_show">
              <div class="accordion_titel">
                Формат
              </div>
              <div class="accordion_body">
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A7<p class="accordion_body_items_text_s">(52,5х105)</p></p>
                </div>
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A6<p class="accordion_body_items_text_s">(105х148)</p></p>
                </div>
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A5<p class="accordion_body_items_text_s">(148х210)</p></p>
                </div>
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A4 <p class="accordion_body_items_text_s">(210х297)</p></p>
                </div>
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A3<p class="accordion_body_items_text_s">(420х210)</p></p>
                </div>
                <div class="accordion_body_items">
                  <p class="accordion_body_items_text">A2<p class="accordion_body_items_text_s">(840х420)</p></p>
                </div>
              </div>
            </div>
 </div>

CSS стили

.accordion_titel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0.75rem 1rem; */
  padding: 16px 25px;
  font-weight: 700;
  font-size: 16px;
  color: #333333;
  /* color: #fff;
  font-weight: 500;
  background-color: #0d6efd;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem; */
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}

.accordion_titel::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%4F77B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  content: "";
}

.accordion__item_show .accordion_titel::after {
  transform: rotate(-180deg);
}

.accordion_titel:hover {
  background-color: #F8F8F8;
}

.accordion__item_hidden .accordion__header {
  /* border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem; */
}

.accordion_body {
  margin-bottom: 15px;
  flex-wrap: wrap;
  display: flex;
  /* justify-content: space-between; */
  /* padding: 15px 10px; */
  overflow: hidden;

  /* border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem; */
}

.accordion_body_items {
  width: 190px;
  margin: 8px 8px;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;

  /* max-width: 172px; */
  height: 45px;
  border: 1px solid #D2D2D2;
  border-radius: 5px;
}
.accordion_body_items:hover {
  transition: all ease .3s;
  box-shadow: 0px 0px 5px 3px rgba(210, 210, 210, 0.51);
}


.accordion_body_items_text {
  font-size: 16px;
  color: #9B9B9B;
}
.accordion_body_items_text_s {
  color: #9B9B9B;
  font-weight: 200;
}

.accordion__item:not(.accordion__item_show) .accordion_body {
  display: none;
}

class ItcAccordion {
  constructor(target, config) {
    this._el = typeof target === 'string' ? document.querySelector(target) : target;
    const defaultConfig = {
      alwaysOpen: true
    };
    this._config = Object.assign(defaultConfig, config);
    this.addEventListener();
  }
  addEventListener() {
    this._el.addEventListener('click', (e) => {
      const elHeader = e.target.closest('.accordion_titel');
      if (!elHeader) {
        return;
      }
      if (!this._config.alwaysOpen) {
        const elOpenItem = this._el.querySelector('.accordion__item_show');
        if (elOpenItem) {
          elOpenItem !== elHeader.parentElement ? elOpenItem.classList.toggle('accordion__item_show') : null;
        }
      }
      elHeader.parentElement.classList.toggle('accordion__item_show');
    });
  }
}
new ItcAccordion(document.querySelector('.accordion'), {
  alwaysOpen: false
});

Comments

[Модератор]

Прячьте под спойлер длинные портянки кода. Неудобно же отвечающим с мобилы…

Answer 1

[Alexander3928]

Как я понял, вам нужно сделать выпадающее меню. Это делается за счет добовления класса элементу при клике. Есть много источников где объяняют

https://schoolsw3.com/howto/howto_js_dropdown.php
https://www.freecodecamp.org/news/how-to-create-a-...