I am making a menu with a toggle using Jquery . The menu is working perfectly.
I am using an Font Awesome class to show the icon on the button to enable toggle . I want to change the class fa-chevron-circle-down
to fa-chevron-circle-up
when toggle is enabled, and return the class to initial when toggle is deactivated.
Follow the code
HTML:
<nav class="nav-menu">
<ul class="nav-list shadow">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="nav-toogle shadow"><i class="fa fa-chevron-circle-down fa-3x" alt="Menu Arrow"></i>
</button>
</nav>
jQuery:
$(document).ready(function(){
$('.nav-toogle').click(function(){
$('.nav-list').slideToggle('slow');
});
});