Как повернуть дочерний элемент элемента, когда мы щелкаем элемент?

Question

У меня есть тег span в теге, чтобы показать шеврон после текста. Я бы хотел повернуть только диапазон после щелчка по тегу a и повернуть назад, если тег a не имеет "свернутого" класса ( потому что, если это так, значит, он закрыт) * ​​1001 *

rotatearrow() {
    $(document).ready(() => {
        if ($('a.collapse').hasClass("collapsed")) {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(90);
        }else {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(-90);
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li>
        <a class="collapsed collapse active" data-target="#TPs" data-toggle="collapse">
            <i class="fas fa-file-word"></i>
            <span class="nav-label">TP</span>
            <span class="fa fa-chevron-left float-right"></span>
        </a>
    </li>
</ul>

EDIT: я создал фрагмент, используя исходный проект FIDDLE

Answer 1

Вы можете легко добиться этого, используя бит css. С помощью свойства перехода вы можете настроить анимацию под свои нужды.

.collapse span.fa-chevron-left {
    transform: rotate(90deg);
    transition: transform 0.25s ease-in-out;
}

.collapse.collapsed span.fa-chevron-left {
    transform: rotate(0deg);
}