I have a dropdown where I have to keep 1st menu expanded & expand/collapse icon. The icon is visible only onclick. By default, the icon is not reflected. I have to insert the icon from my local. Expand/Collapse is working.Maybe my approach to writing code is wrong Please help to fix the icon issue. Below is my code. Thanks in advance.
$(document).ready(function () {
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("expand collapse");
});
$('.sub-menu a').click(function(){
if($(this).hasClass('toggIconUp')){
$(this).removeClass('toggIconUp').addClass('toggIconDown');
}else{
$(this).removeClass('toggIconDown').addClass('toggIconUp');
//var blockId = $(this).parent().attr('data-toggle-id');
}
});
});body {
background-color: #fff;
font-size: 14px;
}
.nav {
position: relative;
margin: 50px;
width: 170px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
display: block;
background: #ffffff;
padding: 10px 15px;
color: #414141;
text-decoration: none;
}
.sub-menu ul li a:hover {
background: #dedede;
}
.nav ul li a .icon_sty {
text-align: center;
float:right;
}
.nav ul ul {
background-color:#eeeeee;
}
.toggIconDown {
background-image: url(./images/down_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
.toggIconUp {
background-image: url(./images/up_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class='sub-menu toggIconUp'><a href='#' class="main_menu ">Panel<div class='icon_sty right'></div></a>
<ul class="">
<li><a href='#'>one </a></li>
<li><a href='#'>two </a></li>
<li><a href='#'>three </a></li>
<li><a href='#'>four </a></li>
<li><a href='#'>five </a></li>
</ul>
</li>
<li class='sub-menu toggIconUp'><a href='#' class="main_menu ">second<div class='icon_sty right'></div></a>
<ul class="">
<li><a href='#'>second_one </a></li>
<li><a href='#'>second-two </a></li>
</ul>
</li>
</ul>
</div>