Question posted in 
I have a navbar that has multiple buttons that on click display a dropdown menu. What happens is when I click a button it shows dropdown menu, then when I click outside the menu it hides the active menu which is right.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"><style>
<style>
.ul {
}
header {
position: fixed;
right: 0;
top: 0;
left: 0;
z-index: 100;
height: 60px;
box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
background: #4891c4;;
color: #ffffff;
transition: left 300ms;
}
.header-content {
position: relative;
top: 0;
width: 200px;
height: 60px;
float: right;
align-items: center;
justify-content: center;
}
.header-content, .header-menu {
display: flex;
align-items: center;
}
.header-content {
justify-content: space-between;
padding: 0rem 1rem;
}
.header-content label:first-child span {
font-size: 1.3rem;
}
.header-content label {
cursor: pointer;
}
.arrow_box {
top: 10px;
position: relative;
border: 1px solid #aaa; /*set border colour here*/
width: 300px;
height: auto;
background-color: #d6eef9; /*set menu container background color here*/
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour and size here*/
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #d6eef9;
border-width: 10px;
right: 8px;
margin-right: 0px;
}
.dropdown {
display: flex;
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
overflow: none;
z-index: 1;
right: 0;
margin-right: 0rem;
top: calc(100% + 0rem);
}
.header-dropdown {
background-color: #d6eef9;
}
.header-dropdown ul li:hover {
background: #d8e2ec;
}
.header-dropdown ul {
list-style-type: none;
padding: 0;
text-align: center;
}
.header-dropdown a {
text-decoration: none;
color: var(--menu-color);
display: block;
padding: 0.5rem 0rem 0.5rem 1rem; /* control menu height here */
text-align: left; /* control menu text align here center, left or right */
}
.header-dropdown a span {
min-height: 15px;
display: inline-flex;
align-items: center;
font-size: 1.7rem;
margin: 0rem 0.5rem 0rem 0.5rem !important;
}
.header-dropdown a span, .header-dropdown a small {
color: #327091;
}
.header-dropdown a small {
font-size: 0.95rem; /* Sidebar font size */
font-weight: normal;
margin: 0rem 1rem 0rem 1rem !important;
font-family: 'Open Sans', sans-serif;
}
.dropbtn {
border: none;
cursor: pointer;
}
.show {
display: block;
}
.notification {
display: flex;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
cursor: pointer;
color: white;
padding: 1px;
font-size: 1.8rem;
justify-content: center;
align-items: center;
}
.badge {
display: flex;
position: absolute;
background: red;
height: 7px;
width: 7px;
justify-content: center;
align-items: center;
border-radius: 50%;
right: -7px;
top: -7px;
padding: 8px;
color: #fff;
font-size: .8rem;
font-weight: 500;
}
</style>
</head>
<body>
<header>
<div class="header-content">
<div class="dropdown">
<a>
<div onclick="myFunction(1)" href="#" class="notification dropbtn las la-envelope"></div>
<span onclick="myFunction(1)" class="badge dropbtn">4</span>
</a>
<div id="myDropdown1" class="dropdown-content">
<div class="arrow_box">
<div class="header-dropdown">
<ul>
<li><a href=""><small>Message content</small></a></li>
<li><a href=""><small>Message content</small></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a>
<div onclick="myFunction(2)" href="#" class="notification dropbtn las la-bell"></div>
<span onclick="myFunction(2)" class="badge dropbtn">8</span>
</a>
<div id="myDropdown2" class="dropdown-content">
<div class="arrow_box">
<div class="header-dropdown">
<ul>
<li><a href=""><span class="las la-question"><small>FAQ</small></span></a></li>
<li><a href=""><span class="las la-user"><small>Profile</small></span></a></li>
<li><a href=""><span class="las la-cog"><small>Settings</small></span></a></li>
<li><a href=""><span class="las la-sign-out-alt"><small>Log out</small></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction(num) {
document.getElementById("myDropdown" + num).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</div>
</header>
</body>
</html>
The problem is: when I click a button it shows dropdown menu, then when I click another button last menu is still showing and not disappearing, that means it will show two menu contents at the same time.
I need to hide last menu content and show active last menu content.
2
Answers
When opening a menu, you need to remove the class
showfrom other menu items.I modified your
myFunctionto the below code. If the clicked element already have theshowclass, it will be removed. Else the forEach will loop through all menu items and remove theshowclass from them.Working example.
You can use this solution. First selecting all myDropdown using [id^=’myDropdown’] (select all starting with myDropdown] then removing the ‘show’ class on all of them except the target (clicked one) and then toggling the ‘show’ class on target (so if clicked once show will be added and twice will be removed)