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

Question

[Сергей]

<ul class="questions-block j-questions-block">
                  <li class="questions-block__item">
                    <p class="questions-block__title">
                      <svg class="icon" width="20" height="20">
                        <use xlink:href="./images/sprite.svg#plus"></use>
                      </svg>Пункт
                    </p>
                    <p class="questions-block__desc">Текст</p>
                  </li>
                  <li class="questions-block__item">
                    <p class="questions-block__title">
                      <svg class="icon" width="20" height="20">
                        <use xlink:href="./images/sprite.svg#plus"></use>
                      </svg>Пункт
                    </p>
                    <p class="questions-block__desc">Текст.</p>
                  </li>

const questionsBlockTitle = document.querySelectorAll('.questions-block__title');
const questionsBlockDesc = document.querySelectorAll('.questions-block__desc');

for (let i = 0; i < questionsBlockTitle.length; i++) {
  questionsBlockTitle[i].onclick = function() {
    for(let j = 0; j < questionsBlockDesc.length; j++) {
      questionsBlockDesc[j].classList.add('questions-block__desc--inactive');
    }
    questionsBlockDesc[i].classList.toggle('questions-block__desc--inactive');
  }
}

Как должно быть - Есть рабочий текстовый аккордеон с выпадающими текстами. У каждого questionsBlockTitle есть иконка. По клику на questionsBlockTitle он получает класс questionsBlockTitle--active, вследствие чего иконка поворачивается на 45 градусов и выпадает текст. Соответственно, при клике на другой пункт - поворачивается другая иконка, а эта возвращается в исходное положение.

Сейчас ничего не поворачивается. Куда прописать questionsBlockTitle--active и заставить иконку вращаться?

Comments

[FeST1VaL]

wat, вы же пишите что она поворачивается на 45 градусов... В чем вопрос то... возможно вам нужен transition?

[Сергей]

Артем Будин, Нет - она должна поворачиваться, но не поворачивается. Выпадает только текст

[Alex]

Сергей, А накрутили то, сложностей. Нет чтобы использовать нативные средства

htmlbook.ru/html/details

Answer 1

[Сергей]

Решение на jQuery

$('.questions-block__title').click(function () {
$(this).toggleClass('active').next().slideToggle();
$('.questions-block__title').not(this).removeClass('active').next().slideUp();
});