My goal is to create a dynamic menu that reveals sub-menu items by sliding them down and changing the background color upon clicking. I am currently using the HTML code displayed below, with the sub1 and sub2 elements initially hidden using display:none;
You can view the code here
However, I am facing an issue where all sub-menus open simultaneously. My desire is for only one sub-menu to be visible at a time, and when a different menu item is clicked on, the previously opened sub-menu should slide back.
<ul class="nav">
<li class="mainnav">MAINNAV</li>
<li class="sub1">SUB1</li>
<li class="sub2">SUB2</li>
</ul>
<ul class="nav">
<li class="mainnav">MAINNAV2</li>
<li class="sub1">SUB1</li>
<li class="sub2">SUB2</li>
</ul>
Additionally, here is the jQuery code snippet being used:
$(".mainnav").on("click", function(){
$(".sub1, .sub2").slideDown("fast");
$( ".mainnav" ).animate({
backgroundColor: "#3A3A3A",
}, 500 );
});