Change fontawesome icons using jquery on the fly

Question

I have created a navigational menu with some of them having submenus. I want the menuitem with fa-chevron-down(down arrow icon) to change to change to fa-chevron-up (up arrow icon) when user clicks on that menu item and changes back when user clicks anywhere else. Plus i also have two request,

1) Since i am very new to jquery, the jquery code that i wrote seems to do the trick but is there a better way? (notice when one menu item is clicked twice the sliding takes place twice. ITS ANNOYING)

2) When user resizes the window the html elements doesnot stays in place and scatters.

Thanks in advance.

jsfiddle demo

UPDATE : Thanks for solving my problem. I refined my problem further and it is working perfectly. Here is the final** JSFIDDLE**

Answer 1

For changing the icon you can easily do something like this in your click event:

$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');

for More take a look at jsfiddle example:

jsfiddle example