Change font icons with jquery on the fly

Question

I created a navigational menu , some of which have submenus. I want the menu item with fa-chevron-down ( fa-chevron-down arrow icon) to change to fa-chevron-up ( fa-chevron-up arrow icon) when the user clicks on this menu item and changes its value when the user clicks on another location. Plus I also have two queries,

1) Since I am very new to jquery, the jquery code I wrote seems to do the trick, but is there a better way? (note that when one menu item is double-clicked, the shift occurs twice. ITS OPEN)

2) When the user resizes the window, the html elements do not remain in place and are scattered.

Thanks in advance.

jsfiddle demo

UPDATE: Thanks for solving my problem. I clarified my problem further and it works fine. Here is the final ** JSFIDDLE **

Answer 1

To change 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 information on the jsfiddle example:

jsfiddle example

Answer 2

I think there is no need to change the class.

If you want to change the fa-chevron-down icon to fa-chevron-up , instead of switching classes, just use toggleClass for fa-rotate-180 . fa-rotate-180 will rotate your icon, and it can solve your goal. No need to add / remove individual classes.

Say:

 $('selector').click(function(){ $('menu-selector').toggleClass('fa-rotate-180'); }); 

This is just a sample. You can get around this.