Take a look at this page first to get an understanding:
On this page, I have implemented multiple dropdown menus that should open when clicked on their respective opener buttons (3 bar icon) and close either when clicked again or anywhere else on the page.
Currently, the menus open when clicked but do not close if another menu is clicked without closing the previous ones. This results in all three menus being opened simultaneously, which is not the desired behavior.
The goal is to have only one menu visible at a time. When a new menu is clicked, it should open while closing any previously opened menu. This should work seamlessly across multiple copies of the HTML code without requiring specific IDs.
The solution needs to be implemented using pure JavaScript and should allow for dynamic functionality with no limitations on copying and pasting the code.
<!DOCTYPE html>
<html lang='en-US'>
<head>
<title>au2p10</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
/* Styling */
</style>
</head>
<body>
<!-- Menu Items -->
<div class='res-loc-shre-con'>
<!-- Menu Content -->
</div>
<!-- Script Section -->
<script>
// JavaScript Logic
</script>
</body>
You can download the full HTML file from this link for testing and further examination: . Feel free to reach out if you need clarification on any part of this request.