Solution 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>

Solution 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 a i {
    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>

Problem :

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>

Comments

Comment posted by Dev

Thanks for the reply @ROOT… I tried your code and for some reason the icon is not changing even though it appears to work just fine here. I’m placing the code inside a rails app if that make any difference.

Comment posted by ROOT

it shouldn’t make different if its the same HTML structure, try to re-produce it here and I will fix it.

Comment posted by Dev

I know… I’m using the same exact code you provided and it doesn’t work at all. It’s not even giving me an error inside the console.. weird!!

Comment posted by Dev

Thanks for the reply @yomisimie… I did not downvote. I tried your code and for some reason the icon is not changing even though it appears to work just fine here. I’m placing the code inside a rails app if that make any difference.

Comment posted by yomisimie

Someone else downvoted, but doesn’t matter. I don’t know much about rails, but the code should work fine. Basically you need to toggleClass on element when clicking on it. And in css you need to rotate the icon when you have the class. Does it give any error at least?

Comment posted by Dev

Nope, I’m getting nothing inside the console.

By

Leave a Reply

Your email address will not be published. Required fields are marked *