当 SVG 图标用作手风琴菜单中的点击图标时如何转换/反转 SVG 图标

Question

I'm trying to create accordion menu with jQuery and SVG.
Then, I attempt to use SVG Arrow Icon as a click button, but
I can not make the Icon rotate flexibly.
Here is my 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);
});

When I click the SVG Arrow Icon, the 'setAttribute' Method works,
but I do not know how to reverse position when I click it once again.
It seems to me that 'toggleAttribute' method also does not work...(I tried it.)

I appreciate if you teach me the effective way.
I 'm sorry if this question is already solved in another section.
Thank you.

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