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.?
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>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')
});
});