Check out this sidebar menu created using JSFiddle: https://jsfiddle.net/jvp2h1am/.
I need help simplifying my JavaScript code to display the submenu for the clicked button without creating separate functions for each button.
Additionally, I want to implement a feature where clicking on one button closes the currently open submenu. For example, if the Personal menu is open and Business button is clicked, the Personal menu should close within the same function.
Here's the HTML structure:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#" target="blank_">JA</a></li>
<li id="homeButton" class="navButton active"><a href="#">
<div class="navButtonContent">
<span class="fa fa-lg fa-home"></span>Home
</div>
</a></li>
... (other menu items)
</ul>
</div>
... (other submenu elements)
The JavaScript logic:
$(document).ready(function() {
$('#personalButton').click(function() {
$('#personalMenu').toggleClass('open');
});
$('#businessButton').click(function() {
$('#businessMenu').toggleClass('open');
});
... (repeat for other buttons)
});