Как преобразовать / поменять иконку SVG, когда она используется как иконка клика в аккордеонном меню

Question

Я пытаюсь создать аккордеонное меню с jQuery и SVG.
Затем я пытаюсь использовать SVG Arrow Icon в качестве кнопки нажатия, но
Я не могу заставить Icon вращаться гибко .
Вот мой Codepen .

//SVG Arrow Icon
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 48 48" enable-background="new 0 0 48 48" width="30" height="30" class="svg_arrow">
<rect class="st0" width="30" height="30"/>
<path class="st1" d="M16,28l7.5-7.5c0.9-0.9,2.2-0.9,3.1,0L34,28" stroke="#2dac9a"/>
</svg>

//SVG CSS
svg{
  fill: #2dac9a;
  position: absolute;
  top: 15px;
  right: 10px;
  transform: rotate(180deg);
}

.tr{
  transform: rotate(0deg);
}

$('.faq_accordion').on('click', function () {
  $(this).children().eq(1).slideToggle(300);
  $(this).children('.faq_li').toggleClass('b');
  $(this).children('.faq_li').find('svg')[0].setAttribute('class', 'tr'); //does not work...
  $(".faq_accordion .faq_answer").not($(this).children().eq(1)).slideUp(300);
});

Когда я нажимаю значок стрелки SVG, метод 'setAttribute' работает,
но я не знаю, как изменить положение, когда я нажимаю на него еще раз.
Мне кажется, что метод 'toggleAttribute' также не работает ... (Я попробовал это.)

Я ценю если вы научите меня эффективному способу.
Извините, если этот вопрос уже решен в другом разделе.
Спасибо.

Answer 1

.tr{
  transform: rotate(0deg);
} // revome this

svg{
     fill: #2dac9a;
     position: absolute;
     top: 15px;
     right: 10px;
     transform: rotate(180deg);
     transition: transform 300ms; // Add this
}

.b svg {
    transform: rotate(0deg); 
} // Add this