Rotate or change a font awesome when li is clicked

Question

I have the following ul li setup and when I click on an li the submenu opens. I also have a font awesome caret next to that li and I want to rotate the caret 180degrees or change the icon with the fas fa-caret-up icon each time I click to open a submenu. Any ideas on how to do this?

 $( 'li.submenu a[href="#"]').click(function(e) { e.preventDefault(); $(this).next().toggle(); return false; });

 ul.ul_submenu, ul.ul_submenu_2{ display:none; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="submenu" id="atag"> <a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"> <a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"> <a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu">blabla</li> </ul> </li> </ul> </li> </ul> </li> </ul>

Answer 1

you can use .find() method to get the tag, and .toggleClass() to change the caret direction, note that I used array of classes in .toggleClass() , I will leave it to you to change the arrow direction, but for me I would have caret-left for closed, and caret-down for opened, here is working snippet:

 $( 'li.submenu a[href="#"]').click(function(e) { e.preventDefault(); $(this).next().toggle(); $(this).find('i').toggleClass(['fa-caret-down', 'fa-caret-left']); return false; });

 ul.ul_submenu, ul.ul_submenu_2{ display:none; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="submenu" id="atag"><a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu">blabla</li> </ul> </li> </ul> </li> </ul> </li> </ul>

Answer 2

You just need a toggleClass and some styling on the i class. You can change the icon directly with JS, changing the class of the i

 $( 'li.submenu a[href="#"]').click( function(e) { e.preventDefault(); $(this).toggleClass('open'); $(this).next().toggle(); return false; });

 ul.ul_submenu, ul.ul_submenu_2{ display:none; } #atag ai { transition: all.3s; } #atag a.open i { transform: rotate(180deg); }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="submenu" id="atag"><a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a> <ul class="ul_submenu"> <li class="submenu">blabla</li> </ul> </li> </ul> </li> </ul> </li> </ul>