0

const accordions = document.querySelectorAll('.accordion__card');

for (const accordion of accordions) {
  const title = accordion.querySelector('.accordion__card__title');
  const text = accordion.querySelector('.accordion__card__text');

  title.addEventListener('click', () => {
    if (text.classList.contains('accordion__card__text--active')) {
      text.classList.remove('accordion__card__text--active');
    } else {
      for (const accordion of accordions) {
        const text = accordion.querySelector('.accordion__card__text');
        text.classList.remove('accordion__card__text--active');
      }
      text.classList.add('accordion__card__text--active');
    }
  });
}
.accordion__card__title {
  padding: 30px 0 30px 30px;
  color: #F7654A;
  font-size: 24px;
  position: relative;
  cursor: pointer;
}

.accordion__card__title i {
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 40px;
  transform: rotateY(-90deg);
}

.accordion__card__title:hover i {
  transform: rotateY(-90deg);
}

.accordion__card__text {
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #999999;
  display: none;
  margin-bottom: 20px;
}

.accordion__card__text--active {
  display: block;
}

.accordion__card__text--active i {
  transform: rotateY(-90deg);
}
<section class="s-accordion section--long">
  <div class="container">
    <div class="section__title">ОТВЕТЫ НА ВОПРОСЫ</div>
    <div class="accordion">
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>

      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
    </div>
  </div>
</section>

Аккордеон почти готов, но код из js мне помогли собрать

Я так же хотел бы помимо основного вопроса спросить, что написано после else? Можете объяснить чтобы я понял как работает код Так же как добавить плавное раскрытие аккордеона? кто-то делает через animate, кто-то через transition, а как сделать в моём коде?

codepen

5
  • ссылку поправьте хотя бы или сюда код приведите
    – Zhihar
    18 окт 2020 в 6:34
  • codepen.io/pen/?template=wvWWwOv
    – senpai
    18 окт 2020 в 6:36
  • @Zhihar: никаких ссылок без кода не нужно. Ссылка протухнет или код там изменится и вопрос не будет нести пользы.
    – UModeL
    18 окт 2020 в 6:38
  • а что требуется то? что там где повернуто? или должно быть повернуто? пока только имеем блоки, которые раскрываются
    – Zhihar
    18 окт 2020 в 6:39
  • i { font-size: 18px; position: absolute; left: 0; top: 40px; transform:rotateY(-90deg); } &:hover { i { transform:rotateY(-90deg); } } В данном отрезке кода используется поворот i с классом fa arrow right, как сделать так, чтобы он даже в активном состоянии был повернут?
    – senpai
    18 окт 2020 в 6:47

1 ответ 1

2

FA генерирует иконки по своему, загляните в разметку (откройте панель разработчика).

Скорее-всего у Вас там не i а svg.

Задайте transform: rotate(-90deg); а не rotateY ... .

И наконец - проверьте Ваш js , активный класс добавляете только раскрывающемуся контенту, когда иконка у Вас в заголовке (в другом блоке)!

Пример (для наглядности добавлен поворот стрелки в другую сторону):

const accordions = document.querySelectorAll('.accordion__card');

for (const accordion of accordions) {
  const title = accordion.querySelector('.accordion__card__title');
  const text = accordion.querySelector('.accordion__card__text');

  title.addEventListener('click', () => {
    if (text.classList.contains('accordion__card__text--active')) {
      title.classList.remove('active');
      text.classList.remove('accordion__card__text--active');
    } else {
      for (const accordion of accordions) {
        const text = accordion.querySelector('.accordion__card__text');


        text.classList.remove('accordion__card__text--active');
      }
      title.classList.add('active');
      text.classList.add('accordion__card__text--active');
    }
  });
}
.accordion__card__title {
  padding: 30px 0 30px 30px;
  color: #f7654a;
  font-size: 24px;
  position: relative;
  cursor: pointer;
}

.accordion__card__title .fa-arrow-right {
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 40px;
  transform: rotate(-90deg);
}

.accordion__card__title:hover .fa-arrow-right {
  transform: rotate(-90deg);
}

.accordion__card__text {
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #999999;
  display: none;
  margin-bottom: 20px;
}

.accordion__card__text--active {
  display: block;
}

.accordion__card__title.active .fa-arrow-right {
  transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>

<section class="s-accordion section--long">
  <div class="container">
    <div class="section__title">ОТВЕТЫ НА ВОПРОСЫ</div>
    <div class="accordion">
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>

      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
    </div>
  </div>
</section>

ИЛИ я бы переписала js, для удобства, так:

// Находим все триггеры по которым будем кликать:
let titles = document.querySelectorAll('.accordion__card__title');

// При клике на каждый триггер, выполняем функцию.
titles.forEach(title => title.addEventListener('click', Trigger));


// Функция
function Trigger() {
  // Находим все карточки
  let accordions = document.querySelectorAll('.accordion__card');

  // И находим именну ту карточки нутри которой находится триггер (на который кликнули)
  let accordion = this.closest('.accordion__card');

  // Если карточка НЕ содержит активный класс
  if (!accordion.classList.contains('active')) {

    // У всех карточек удаляем активный класс
    accordions.forEach((accordion) => accordion.classList.remove('active'));

    // А именно нашей - добавляем
    accordion.classList.add('active');
  } else {

    // Иначе удаляем и у нашей карточки активный класс
    accordion.classList.remove('active');
  }
}
.accordion__card__title {
  padding: 30px 0 30px 30px;
  color: #f7654a;
  font-size: 24px;
  position: relative;
  cursor: pointer;
}

.accordion__card__title .fa-arrow-right {
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 40px;
  transform: rotate(-90deg);
}

.accordion__card__title:hover .fa-arrow-right {
  transform: rotate(-90deg);
}

.accordion__card__text {
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #999999;
  display: none;
  margin-bottom: 20px;
}

.accordion__card.active .accordion__card__text {
  display: block;
}

.accordion__card.active .fa-arrow-right {
  transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>

<section class="s-accordion section--long">
  <div class="container">
    <div class="section__title">ОТВЕТЫ НА ВОПРОСЫ</div>
    <div class="accordion">
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>

      <div class="accordion__card">
        <div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
        <div class="accordion__card__text">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
          Lorem Ipsum для распечатки образцов.
        </div>
      </div>
    </div>
  </div>
</section>

2
  • Большое вам спасибо, теперь действительно они меняются, но можете ли сказать что нужно сделать чтобы при раскрытии одной карточки, в других карточках, стрелки возвращались в обратное положение?? так же хотел бы помимо основного вопроса спросить, что написано после else? Можете объяснить чтобы я понял как работает код Так же как добавить плавное раскрытие аккордеона? кто-то делает через animate, кто-то через transition, а как сделать в моём коде?
    – senpai
    18 окт 2020 в 7:11
  • @senpai, поправила, добавила свой вариант js с короткими объяснениями
    – SVE
    18 окт 2020 в 7:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.