My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achieve, please refer to my code on JSFiddle with jQuery 2.1 enabled.
Check it out here: https://jsfiddle.net/examplelink
$(document).ready(function() {
// JavaScript logic for controlling dropdown menus
});.main-hamburger-menu {
/* CSS styles for hamburger menu */
}
/* DESKTOP MENU STYLES */
.hidden {
display: none;
}
.desktop__menu {
/* CSS selectors for desktop menu */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<!-- HTML structure for desktop menu -->
</div>
</div>
<br>
<br>
<br>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<!-- Another instance of the desktop menu HTML structure -->
</div>
</div>