Как сделать значок переключения меню аккордеона?

Question

Я пытаюсь реализовать меню аккордеона. Я сделал это, и это не работает. Я просто хочу сделать значок переключения

            $('.logo-button').click(function(){
            $(this).find('.my-arrow').toggleClass('down');
        }); 

.my-arrow.down {
        transform:rotate(450deg);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
                                            <span class="left-side-panel">Text</span>
                                            <i class="fa fa-angle-right my-arrow"></i>
                                        </a>

Answer 1

Чтобы свойство transform работало, попробуйте установить display: block или display:inline-block в классе .my-arrow.down:

.my-arrow.down {
    display: block;
    transform:rotate(450deg);
    ...

Вам также необходимо включить содержимое в свой <i> элемент. Например, вы можете использовать символ >:

<i class="fa fa-angle-right my-arrow">
     >
</i>

Вот рабочий пример с вашим кодом и моими изменениями:

$('.logo-button').click(function(){
    $(this).find('.my-arrow').toggleClass('down');
}); 

.my-arrow.down {
    display: inline-block;
    transform:rotate(450deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow">></i>
</a>