I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue:
- When I collapse one item and then try to collapse another, the previous arrow does not return to its default state.
Is there a way to ensure that the arrow returns to its default state when clicking on a different collapsible item?
$(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>