'how to change submenu arrow icon according to the menu display

this is the my menu

<ul>
    <li class="nav-item">
        <a class="nav-link sub-parent">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>
                Dashboard
                <i class="right fas fa-angle-left"></i>
            </p>
        </a>
        <ul class="nav sub-menu">
            <li class="nav-item">
                <a href="../../index.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Dashboard v1</p>
                </a>
            </li>
        </ul>
    </li>
</ul>

this is the jquery function that i use for sub menu

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    });
});

css class

 .sub-menu{display: none;}

Currently left arrow icon display in the menu. I used this for it

when sub menu open, i need to change this icon. How i do it.?

javascriptjquerycss


Solution 1:[1]

You can use the transform property to rotate the icon.

Modified your code to make it work, check below.

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();

    });
  $('.sub-parent p').click(function(e){
      e.preventDefault();
      $(".right").toggleClass('rotate-icon');
    });
});
.sub-menu{display: none;}

.right{
  transition: 0.5s transform ease-in-out;
}

.rotate-icon {
  transform:rotate(-90deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="nav-item">
        <a class="nav-link sub-parent">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>
                Dashboard
                <i class="right fas fa-angle-left"></i>
            </p>
        </a>
        <ul class="nav sub-menu">
            <li class="nav-item">
                <a href="../../index.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Dashboard v1</p>
                </a>
            </li>
        </ul>
    </li>
</ul>

Solution 2:[2]

You can use:

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();

      $(this).children('p i').toggleClass('fa-angle-left')
      $(this).children('p i').toggleClass('fa-angle-right')
    });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 amir sarfar

Related Questions