I wants to create sidebar menu where few "Menu Item" has "Sub Menu Item", with each "click" on "Active Class- Menu Item" the related "sub menu item" will "slide Down" and previous "slide down sub menu item" will "slide up" or you can say closed.
When I click on "Menu Item", its class is change to "Active" Class. then but every time I click, "Sub menu item" are slidedown properly, but the previous one are not closing or slideup.
<ul class="sidebar-menu-item" style="">
<li>
<a><i class="fa"></i> Home <span class="fa"></span></a>
<ul class="sidebar-sub-menu-item">
<li><a href="index.html">Home1</a></li>
<li><a href="index2.html">Home2</a></li>
<li><a href="index3.html">Home3</a></li>
</ul>
</li>
<li>
<a><i class="fa"></i> Tell Us <span class="fa"></span></a>
</li>
<li>
<a><i class="fa"></i> About <span class="fa"></span></a>
<ul class="sidebar-sub-menu-item">
<li><a href="About1.html">About1</a></li>
<li><a href="About2.html">About2</a></li>
<li><a href="About3.html">About3</a></li>
</ul>
</li>
<li>
<a><i class="fa"></i>Contact<span class="fa"></span></a>
<ul class="sidebar-sub-menu-item">
<li><a href="Contact1.html">Contact1</a></li>
<li><a href="Contact2.html">Contact2</a></li>
<li><a href="Contact3.html">Contact3</a></li>
</ul>
</li>
</ul>
Here is my JavaScript code.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
const activeparentmenu = document.querySelectorAll('.sidebar-menu-item li');
activeparentmenu.forEach(navLinkEL => {
navLinkEL.addEventListener('click', () => {
document.querySelector('.active')?.classList.remove('active');
navLinkEL.classList.add('active');
});
});
});
</script>
