Accordion menu with rotating arrows

Question

I have created a simple accordion with rotating arrows on click. It works fine with one exception :

• I have a few collapsible item and if I click the first one it works ok. But clicking the other one do not rotate the previous icon to the default state.

How to make arrow to come back to the default state when clicking the other 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>

Answer 1

If it helps other folks; this combination worked for me: (it's almost identical except I added the ".arrow-r" after the firs .find)

I had 4 main Accordions with multiple Accordions inside, but I only wanted the main arrow on each of the main accordions to animate. (this combination stopped all the inner accordions from triggering the main animation)

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

This is my actual code if it helps to see the pattern:

$(function() {
  $('.accroordlite').on('click', function() {
    //Reset all but the current
    $('.accroordlite').not(this).find('.accroordlite').removeClass('down');
    //Rotate/reset the clicked one
    $(this).find('.spinOnClick').toggleClass('down');
  })
})

Answer 2

Please try this:

$(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');
  })
})