Почему не работает аккордеон?

Question

[lychak_vlad]

Делал аккордеон по гайду с ютуба
Но не могу понять почему он не работает, gриписывает класс open только к классу accordion
Хотя должен приписывать к accordion__tittle и accordion__content

HTML

<section>
    <div class="faq">
      <div class="container">
        <div class="faq__wrapper">
          <div class="faq__top">
            <h3 class="faq__suptittle">CUSTOMER HELP</h3>
            <h2 class="faq__tittle">Frequently asked questions</h2>
          </div>
          <div class="faq__accordion">

            <ul class="accordion__list">
              <li class="accordion">
                <button class="accordion__control">
                  <span class="accordion__tittle">Reque insolens in vel?</span>
                </button>
                <div class="accordion__content">
                  <div class="faq__block-wrapper">
                    <p class="faq__block-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                      vidit
                      tractatos, vero tractatos ius an, in mel diceret persecuti.
                    </p>
                    <button class="faq__block-button">Go to documentation</button>
                  </div>
                </div>
              <li>
            </ul>
            <img class="faq__line" src="img/faq_line.svg" alt="">

          </div>
        </div>
      </div>
    </div>
  </section>

// FAQ

  .faq__top {
    text-align: center;
  }
  .faq__suptittle{
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #3D4F9F;
padding: 176px 0px 20px;
  }
  .faq__tittle {
    font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 30px;
color: #3D4F9F;
padding-bottom: 70px;
  }
  .faq__accordion {
    margin: 0 auto;
    max-width: 743px;
    overflow: hidden;
    
  }
  .faq__block-top {
    display: flex;
  }

.accordion__tittle{
padding-left: 30px;
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 19px;
letter-spacing: 0.03em;
color: #8E96B7;
transition: all 0.2s ease-out;
position: relative;
padding-bottom: 20px;
background-color: white;
  }

.accordion__tittle::before,
.accordion__tittle::after{
    content: '';
    width: 12px;
    height: 3px;
    background-color: #8E96B7;
    position: absolute;
    top: 8px;
    border-radius: 2px;
    transition: all 0.2s ease-out;
  }

.accordion__tittle::before{
    transform: rotate(40deg);
    left: 0;
  }

.accordion__tittle::after{
    transform: rotate(-40deg);
    left: 7px;
  }


.accordion__tittle:hover::before,
.accordion__tittle:hover::after{
    background-color: #495274;
  }

.accordion__tittle:hover{
    color: #495274;
  }

.accordion__tittle.open{
    color: #495274;
  }

.accordion__tittle.open::before,
.accordion__tittle.open::after{
    background-color: #495274;
  }

.accordion__tittle.open::before{
    transform: rotate(-40deg);
  }

.accordion__tittle.open::after{
    transform: rotate(40deg);
  }

  .accordion__control{
    margin-bottom: 20px;
  }

  .faq__line {
    padding-bottom: 19px;
  }
  .faq__line:last-child {
  }

  .faq__block-wrapper {
    display: flex;
    max-width: 743px;
  }

  .accordion__content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 20px;
    transition:  all 0.4s ease-out;
  }

  .accordion__content.open {
    opacity: 1;
    padding: 0px 20px 20px;
  }

  .faq__block-text {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.1em;
    color: #8D96BD;
    max-width: 491px;
    padding: 16px 62px 0px 47px;
  }
  .faq__block-button {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: #7382A3;
    background: #E8ECF4;
    border-radius: 2px;
    padding: 13px 14px 13px 15px;
    max-height: 43px;
    margin: 31px 15px 0px 0px;
  }

  .faq__block-button:hover{
    color: #5d6a85;
    background: #ced3da;
  }

  .faq__block-button:active{
    color: #515c74;
    background: #a7abb0;
  }

document.addEventListener('DOMContentLoaded', () => {
    const accordions = document.querySelectorAll('.accordion');

    accordions.forEach(el => {
        el.addEventListener('click', (e) => {
            const self = e.currentTarget;
            const control = self.querySelector('.accordion__control');
            const content = self.querySelector('.accordion__content');
            
            self.classList.toggle('open');
        });
    });
});

Извините за количество кода, через codepen совсем не то выводило

Answer 1

[Сергей delphinpro]

Самое время подумать =)

Наверное, потому, что класс вы переключаете как раз у .accordion :
self.classList.toggle('open');

Хотя вроде и получаете нужные элементы:

const control = self.querySelector('.accordion__control');
const content = self.querySelector('.accordion__content');

Ну и стоит учесть, что стили у вас прописаны для .accordion__tittle.open, а получаете вы .accordion__control.

Этих наводок достаточно, что бы самому найти решение проблемы?

Comments

[lychak_vlad]

Ломал над этим голову целый день, а оказалось так очевидно ; )
Сейчас додумался, спасибо за наставление!
Только теперь по клику на кнопку faq__block-button сам блок accordion__content закрывается, не подскажете через какой метод можно это предотвратить?