Sidebar menu open submenu with slide down after click in jQuery

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>