Only show active dropdown menu content - multiple dropdown buttons in a navbar
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.
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');
}
}
}
}.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;
}<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<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>
</div>
</header>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.
Solution
When opening a menu, you need to remove the class show from other menu items.
I modified your myFunction to the below code. If the clicked element already have the show class, it will be removed. Else the forEach will loop through all menu items and remove the show class from them.
function myFunction(num) {
if (document.getElementById("myDropdown" + num).classList.contains('show')) {
document.getElementById("myDropdown" + num).classList.remove('show');
return;
}
Array.from(document.getElementsByClassName("dropdown-content")).forEach(x => {
if (x.classList.contains('show'))
x.classList.remove('show');
});
document.getElementById("myDropdown" + num).classList.toggle("show");
}
Working example.
function myFunction(num) {
if (document.getElementById("myDropdown" + num).classList.contains('show')) {
document.getElementById("myDropdown" + num).classList.remove('show');
return;
}
Array.from(document.getElementsByClassName("dropdown-content")).forEach(x => {
if (x.classList.contains('show'))
x.classList.remove('show');
});
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');
}
}
}
}.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;
}<!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">
</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>
</div>
</header>
</body>
</html>- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?