title: Change fontawesome icons using jquery on the fly
body: <p>I have created a <a href="http://jsfiddle.net/pjQP7/8/" rel="noreferrer"><code>navigational menu</code></a> with some of them having submenus. I want the menuitem with <code>fa-chevron-down</code>(down arrow icon) to change to change to <code>fa-chevron-up</code> (up arrow icon) when user clicks on that menu item and changes back when user clicks anywhere else. Plus i also have two request, </p>
  
  <blockquote>
    <p>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)</p>
    
    <p>2) When user resizes the window the html elements doesnot stays in place
    and scatters.</p>
  </blockquote>
  
  <p>Thanks in advance.</p>
  
  <p><a href="http://jsfiddle.net/pjQP7/8/" rel="noreferrer" title="JsFiddle">jsfiddle demo</a></p>
  
  <p><strong>UPDATE :
  Thanks for solving my problem. I refined my problem further and it is working perfectly. Here is the final**</strong> <a href="http://jsfiddle.net/pjQP7/11/" rel="noreferrer" title="FINAL JSFIDDLE">JSFIDDLE</a>**</p>