Не корректно работа accordion?

Question

[Дмитрий Ярощук]

Не корректно работает accordion, а именно когда нажимаешь на блок раскрываются все блоки, а должен раскрываться только тот на который нажали

<div class="accordion">
                        <div class="accordion__container">
                            <div class="accordion__wrapper">
                                <div class="accordion__block">
                                    <div class="accordion__subjects">
                                        <div class="accordion__database">Базы данных</div>
                                        <div class="accordion__design">Дизайн</div>
                                    </div>
                                    <div class="accordion__inner">
                                        <div class="accordion__title">Что такое патент и что он дает?</div>
                                        <svg class="accordion__swg" width="16" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.53.47a.75.75 0 0 0-1.06 0L2.697 5.243a.75.75 0 1 0 1.06 1.06L8 2.061l4.243 4.242a.75.75 0 0 0 1.06-1.06L8.53.47zM8.75 25V1h-1.5v24h1.5z" fill="#DA4533"/></svg>
                                    </div>
                                </div>
                                <div class="accordion__text">Патент — это охранный документ</div>
                            </div>
                            <div class="accordion__wrapper">
                                <div class="accordion__block">
                                    <div class="accordion__subjects">
                                        <div class="accordion__database">Базы данных</div>
                                        <div class="accordion__design">Дизайн</div>
                                    </div>
                                    <div class="accordion__inner">
                                        <div class="accordion__title">Чем подтверждается факт поступления заявки в Роспатент?</div>
                                        <svg class="accordion__swg" width="16" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.53.47a.75.75 0 0 0-1.06 0L2.697 5.243a.75.75 0 1 0 1.06 1.06L8 2.061l4.243 4.242a.75.75 0 0 0 1.06-1.06L8.53.47zM8.75 25V1h-1.5v24h1.5z" fill="#DA4533"/></svg>
                                    </div>
                                </div>
                                <div class="accordion__text">Патент — это охранный документ</div>
                            </div>
                            <div class="accordion__wrapper">
                                <div class="accordion__block">
                                    <div class="accordion__subjects">
                                        <div class="accordion__database">Базы данных</div>
                                        <div class="accordion__design">Дизайн</div>
                                    </div>
                                    <div class="accordion__inner">
                                        <div class="accordion__title">Какие документы необходимо представить для получения патента на изобретение?</div>
                                        <svg class="accordion__swg" width="16" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.53.47a.75.75 0 0 0-1.06 0L2.697 5.243a.75.75 0 1 0 1.06 1.06L8 2.061l4.243 4.242a.75.75 0 0 0 1.06-1.06L8.53.47zM8.75 25V1h-1.5v24h1.5z" fill="#DA4533"/></svg>
                                    </div>
                                </div>
                                <div class="accordion__text">Патент — это охранный документ </div>
                            </div>
                            <div class="accordion__wrapper">
                                <div class="accordion__block">
                                    <div class="accordion__subjects">
                                        <div class="accordion__database">Базы данных</div>
                                        <div class="accordion__design">Дизайн</div>
                                    </div>
                                    <div class="accordion__inner">
                                        <div class="accordion__title">Кто может подать заявку?</div>
                                        <svg class="accordion__swg" width="16" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.53.47a.75.75 0 0 0-1.06 0L2.697 5.243a.75.75 0 1 0 1.06 1.06L8 2.061l4.243 4.242a.75.75 0 0 0 1.06-1.06L8.53.47zM8.75 25V1h-1.5v24h1.5z" fill="#DA4533"/></svg>
                                    </div>
                                </div>
                                <div class="accordion__text">Патент — это охранный документ</div>
                            </div>
                            <div class="accordion__wrapper">
                                <div class="accordion__block">
                                    <div class="accordion__subjects">
                                        <div class="accordion__database">Базы данных</div>
                                        <div class="accordion__design">Дизайн</div>
                                    </div>
                                    <div class="accordion__inner">
                                        <div class="accordion__title">Каков порядок рассмотрения заявки на выдачу патента на изобретение в Роспатенте?</div>
                                        <svg class="accordion__swg" width="16" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.53.47a.75.75 0 0 0-1.06 0L2.697 5.243a.75.75 0 1 0 1.06 1.06L8 2.061l4.243 4.242a.75.75 0 0 0 1.06-1.06L8.53.47zM8.75 25V1h-1.5v24h1.5z" fill="#DA4533"/></svg>
                                    </div>
                                </div>
                                <div class="accordion__text">Патент — это охранный документ</div>
                            </div>
                        </div>
                    </div>

.accordion__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(598px, 1fr));
  grid-template-rows: repeat(4, 1fr);
  -webkit-column-gap: 20px;
          column-gap: 20px;
  row-gap: 20px;
}

.accordion__block {
  max-width: 598px;
  width: 100%;
  min-height: 119px;
  background-color: #363636;
  border-radius: 8px;
}

.accordion__subjects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Montserrat Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 165%;
  color: #AAAAAA;
  margin-bottom: 10px;
}

.accordion__database {
  max-width: 115px;
  width: 100%;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px 0;
  padding: 5px 0 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.accordion__design {
  max-width: 76px;
  width: 100%;
  padding: 5px 0 5px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 8px 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.accordion__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 558px;
  width: 100%;
  margin: 0 auto;
}

.accordion__title {
  max-width: 534px;
  width: 100%;
  font-family: "Montserrat Medium", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 160%;
  color: #8A8A8A;
}

.accordion__text {
  max-width: 598px;
  width: 100%;
  background-color: transparent;
  font-family: "Montserrat Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  color: #8A8A8A;
  -webkit-transition: all 1.4s ease;
  transition: all 1.4s ease;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.accordion__wrapper.active .accordion__swg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.7s ease-in;
  transition: -webkit-transform 0.7s ease-in;
  transition: transform 0.7s ease-in;
  transition: transform 0.7s ease-in, -webkit-transform 0.7s ease-in;
}

.accordion__wrapper.active .accordion__text {
  max-height: 1000px;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}

const wrapper = document.querySelectorAll(".accordion__wrapper");

wrapper.forEach(faq => {
    faq.addEventListener('click', () => {
        faq.classList.toggle("active");
    })
})

Comments

[Сергей Сергей]

flex или grid выравнивание высоты?

[Степан Крапивин]

а кто будет снимать active класс с уже открытых блоков, при открытии новых?

[Дмитрий Ярощук]

Сергей Сергей, grid

[Дмитрий Ярощук]

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

[Сергей Сергей]

Моя догадка в том, что grid-выравнивание заставляет блоки перенимать наибольшую высоту из своего множества блоков, тотальное выравнивание по сетке.

[Дмитрий Ярощук]

Сергей Сергей, Grid убрал, все заработало. Подскажите а с помощью чего можно тогда сетку построить чтобы она не мешала работе accordion

[Сергей Сергей]

Внутри каждого блока аккордеона сетку делать, а сами блоки оставить с какой-нибудь фиксированной высотой.