Меню аккордеона с вращающимися стрелками

Question

Я создал простой аккордеон с вращающимися стрелками по щелчку. Он отлично работает за одним исключением:

• У меня есть несколько складных предметов, и если я нажму первый, он будет работать нормально. Но нажатие на другое не поворачивает предыдущий значок до состояния по умолчанию.

Как сделать стрелку, чтобы вернуться в состояние по умолчанию при нажатии на другой складной элемент?

$(function() { 
 
    $('.arrow-r').on('click', function() { 
 
    $(this).find('.fa-angle-down').toggleClass('rotate-element'); 
 
    }) 
 
})

.rotate-element { 
 
    @include transform (rotate(180deg)); 
 
} 
 
.fa-angle-down { 
 
    &.rotate-icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 17px; 
 
    @include transition (all 150ms ease-in 0s); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="collapsible collapsible-accordion"> 
 
    <li><a class="collapsible-header arrow-r"> Menu 1<i class="fa fa-angle-down rotate-icon"></i></a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li><a class="collapsible-header arrow-r"> Menu 2<i class="fa fa-angle-down rotate-icon"></i></a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li><a class="collapsible-header"> Menu 3</a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li>

Answer 1

Пожалуйста, попробуйте следующее:

$(function() { 
    $('.arrow-r').on('click', function() { 
    //Reset all but the current 
    $('.arrow-r').not(this).find('.fa-angle-down').removeClass('rotate-element'); 
    //Rotate/reset the clicked one 
    $(this).find('.fa-angle-down').toggleClass('rotate-element'); 
    }) 
})