Toggle css class in a nav toggle, using Jquery

Navigation
2

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');    
    }); 
});
    
asked by anonymous 14.10.2015 / 21:38

1 answer

1

You can use .toggleClass() and pass the two classes separated by spaces. Since the element that receives the click event is the button you must select the i element. You can do this with .find('i') .

The code looks like this: 

$(document).ready(function(){
    $('.nav-toogle').click(function(){
        $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
        $('.nav-list').slideToggle('slow');    
    }); 
});

Example: link

    
14.10.2015 / 23:21
Select PHP in tables with special characters Create a Read More with jQuery