CODEWITHSUNDEEP
jqueryhtml
Akul Von Itram
Akul Von Itram

Reputation: 1534

Add and remove class in navigation

I building navigation list with open and close. I get to work hidden list to open and close, but can not get to change fa class from fa-plus to fa-minus when child list is opened.

<nav> 
  <ul>
    <li class="test"><a href="#">Menu 1 <i class="fa fa-plus"></i></a>
       <ul>
         <li><a href="#11">Sub menu 1</a></li>
         <li><a href="#12">Sub menu 2</a></li>   
         <li><a href="#13">Sub menu 3</a></li>                       
       </ul>
    </li>
    <li class="test"><a href="#">Menu 2 <i class="fa fa-plus"></i></a>
       <ul>
         <li><a href="#21">Sub menu 1</a></li>
         <li><a href="#22">Sub menu 2</a></li>                       
       </ul>
    </li> 
  </ul>
</nav>

And this is my jquery code:

jQuery(document).ready(function () {
    jQuery('.test').on('click', function(){
        jQuery('nav ul ul').hide();
        jQuery('nav ul li a i').addClass('fa-plus');
        jQuery(this).children('nav ul ul').slideDown();
        jQuery(this).children('nav ul li a i').removeClass('fa-plus').addClass('fa-minus');
        return false;  
    });
});

Upvotes: 0

Views: 191

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

jQuery(document).ready(function () {
    jQuery('.test').on('click', function(){
        // hide all ul's
        jQuery('nav ul ul').hide();
        // add class plus and removing minus from all i
        jQuery('nav ul li a i').addClass('fa-plus').removeClass('fa-minus');
        // toggle only current li -> ul
        jQuery(this).children('ul').slideDown();
        // toggle class for current li -> i
        jQuery(this).find('a > i').removeClass('fa-plus').addClass('fa-minus');
        return false;  
    });
});

Upvotes: 1

Related Questions