Jquery Accordion changing Fontawesome icons on click

Question

I have a very simple accordion which I have added in a font awesome icon to with the class .fa-angle-down.

I've added a toggleClass so when the .accordion-toggle is clicked it rotates the icon 180 so its pointing up rather than down.

What I need help with is adding in the next bit which says that if any other .accordion-toggle have the class .rotate180 then remove it.

I have tried this-

$(".fa-angle-down").not($(this)).removeClass('rotate180');

But it just removes the class from all... Help?

  $(document).ready(function($) {
  $('#accordion').find('.accordion-toggle').click(function(){

  $(this).next().slideToggle('fast');
  $(this).toggleClass('active')
  $(".fa-angle-down").toggleClass('rotate180')

  $(".accordion-content").not($(this).next()).slideUp('fast');
  $(".accordion-toggle").not($(this)).removeClass('active');

  });
  });

Answer 1

Just find all which have the class and then remove it like this

$("#accordion").accordion();

$('#accordion .accordion-toggle').click(function () {

    // Whatever other code here too

    //Remove all rotate180
    $('.rotate180').removeClass('rotate180');
    //Now just add it for 'this'
    $(this).children('.fa-angle-down').addClass('rotate180');
});

Working demo here: http://jsfiddle.net/md3hd/