I have two dropdown menus which are displayed when the user clicks them. They are hidden by default. Is there a way to close the dropdown which is not being clicked?. For example the 'client' menu should be closed once I click the 'car' menu.
/* display the dropdown when client, vehcile or module are clicked */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content */
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block")
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
.dropdown-btn {
border: none;
background: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
font-family: LinetoCircular;
display: block;
padding-left: 20px;
z-index: 0;
}
#wrapper {
display: flex;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
display: none;
font-size: 18px;
padding-top: 10px;
background-color: #575757;
}
.dropdown-container a {
color: white;
padding-left: 30px;
}
.dropdown-container a:hover {
background-color: #414141;
}
<div>
<button class="dropdown-btn">
<div>Client</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
<div>
<button class="dropdown-btn">
<div>Car</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
</div>
</div>
If there is a possible way to not change a lot in the code, that would be appreciated.
Live demo: https://jsfiddle.net/2c9pbyvo/1/
To do what you require, loop through all the .dropdown-btn elements and hide the ones which are not relevant to the clicked button:
Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
if (el !== dropdownContent)
el.style.display = 'none';
});
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
if (el !== dropdownContent)
el.style.display = 'none';
});
if (dropdownContent.style.display === "block")
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
.dropdown-btn {
border: none;
background: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
font-family: LinetoCircular;
display: block;
padding-left: 20px;
z-index: 0;
}
#wrapper {
display: flex;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
display: none;
font-size: 18px;
padding-top: 10px;
background-color: #575757;
}
.dropdown-container a {
color: white;
padding-left: 30px;
}
.dropdown-container a:hover {
background-color: #414141;
}
<div>
<button class="dropdown-btn">
<div>Client</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
<div>
<button class="dropdown-btn">
<div>Car</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
</div>
</div>
Related
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
I always used the script from this answer from #Sushanth -- to slide images on single pages. It's perfect.
The problem, it only works on one slider per page, now I'm in a project where I have to place different small sliders associated with buttons and obviously, it doesn't work, or rather, only the first one works. It has taken me a long time to understand the script, as I have read in other answers, I guess it's something about assigning a different ID to each slider, but I cannot find the solution.
In the example snippet, the round button links to the first slider, the one that works. The square button links to the second slider (with three slides) but it doesn't work. Since sliders are links, each slider has its own set of next, prev, and close buttons.
var $first = $('li:first', 'ul'),
$last = $('li:last', 'ul');
// Have the first and last li's set to a variable
$("#next").click(function() {
var $next,
$selected = $(".selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev").click(function() {
var $prev,
$selected = $(".selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
* {
text-decoration: none;
}
.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
cursor: pointer;
z-index: 1500;
color: #C2C6D2;
font-size: 3rem;
margin-top: 3rem;
}
.fstbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f111";
font-weight: 900;
}
.scndbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f0c8";
font-weight: 900;
}
.pre:before {
font-family: 'Font Awesome 5 free';
content: "\f060";
font-weight: 900;
}
.post:before {
font-family: 'Font Awesome 5 free';
content: "\f061";
font-weight: 900;
}
.BACK:before {
font-family: 'Font Awesome 5 free';
content: "\f00d";
font-weight: 900;
}
/* pop-up */
.popup {
position: fixed;
top: 0;
padding-top: 2rem;
width: 100%;
height: 100%;
display: none;
text-align: center;
background: #ecf0fa;
z-index: 20;
opacity: 1;
overflow: hidden;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0, 2s;
animation-name: fadein;
animation-duration: 0.2s;
height: 100%;
}
/*SLIDER*/
.SLIDER {
position: absolute;
top: -1.4rem;
right: 7rem;
display: flex;
gap: 1.5rem;
}
li {
display: none;
width: fit-content;
height: fit-content;
padding: 1rem 2rem;
}
.selected,
.linked:last-child {
display: block;
}
/*FIN SLIDER*/
.yl {
background: yellow;
}
.br {
background: brown;
}
.bl {
background: blue;
}
.pi {
background: pink;
}
.re {
background: red;
}
.or {
background: orange;
}
.cy {
background: cyan;
}
.gr {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>
<div id="firstslider" class="popup">
<ul>
<li class="linked yl">
<h3>Yellow</h3>
</li>
<li class="linked bl">
<h3>Blue</h3></li>
<li class="linked br">
<h3>Brown</h3></li>
<li class="linked cy">
<h3>Cyan</h3></li>
<li class="linked gr">
<h3>Green</h3></li>
</ul>
<div class="SLIDER">
<div id="prev" class="pre"></div>
<div id="next" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
<div id="scndslider" class="popup">
<ul>
<li class="linked pi">
<h3>Pink</h3>
</li>
<li class="linked re">
<h3>Red</h3></li>
<li class="linked or">
<h3>Orange</h3></li>
</ul>
<div class="SLIDER">
<div id="prev2" class="pre"></div>
<div id="next2" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
The easiest way is to bind click events using different IDs for prev and next element.
Here I used #prev2 and #next2, and duplicated your functions, limiting each set of buttons to #firstslider and #scndslider
var $first = $('#firstslider li:first'),
$last = $('#firstslider li:last');
var $first2 = $('#scndslider li:first'),
$last2 = $('#scndslider li:last');
// Have the first and last li's set to a variable
$("#next").click(function() {
var $next,
$selected = $("#firstslider .selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev").click(function() {
var $prev,
$selected = $("#firstslider .selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
// Have the first and last li's set to a variable
$("#next2").click(function() {
var $next,
$selected = $("#scndslider .selected");
// get the selected item
// If next li is empty , get the first
$next = $selected.next('li').length ? $selected.next('li') : $first2;
$selected.removeClass("selected");
$next.addClass('selected');
// hides target
$('li').removeClass("linked");
});
$("#prev2").click(function() {
var $prev,
$selected = $("#scndslider .selected");
// get the selected item
// If prev li is empty , get the last
$prev = $selected.prev('li').length ? $selected.prev('li') : $last2;
$selected.removeClass("selected");
$prev.addClass('selected');
// hides target
$('li').removeClass("linked");
});
* {
text-decoration: none;
}
.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
cursor: pointer;
z-index: 1500;
color: #C2C6D2;
font-size: 3rem;
margin-top: 3rem;
}
.fstbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f111";
font-weight: 900;
}
.scndbutton:before {
font-family: 'Font Awesome 5 free';
content: "\f0c8";
font-weight: 900;
}
.pre:before {
font-family: 'Font Awesome 5 free';
content: "\f060";
font-weight: 900;
}
.post:before {
font-family: 'Font Awesome 5 free';
content: "\f061";
font-weight: 900;
}
.BACK:before {
font-family: 'Font Awesome 5 free';
content: "\f00d";
font-weight: 900;
}
/* pop-up */
.popup {
position: fixed;
top: 0;
padding-top: 2rem;
width: 100%;
height: 100%;
display: none;
text-align: center;
background: #ecf0fa;
z-index: 20;
opacity: 1;
overflow: hidden;
}
.popup:target {
display: block;
-webkit-animation-name: fadein 0, 2s;
animation-name: fadein;
animation-duration: 0.2s;
height: 100%;
}
/*SLIDER*/
.SLIDER {
position: absolute;
top: -1.4rem;
right: 7rem;
display: flex;
gap: 1.5rem;
}
li {
display: none;
width: fit-content;
height: fit-content;
padding: 1rem 2rem;
}
.selected,
.linked:last-child {
display: block;
}
/*FIN SLIDER*/
.yl {
background: yellow;
}
.br {
background: brown;
}
.bl {
background: blue;
}
.pi {
background: pink;
}
.re {
background: red;
}
.or {
background: orange;
}
.cy {
background: cyan;
}
.gr {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>
<div id="firstslider" class="popup">
<ul>
<li class="linked yl">
<h3>Yellow</h3>
</li>
<li class="linked bl">
<h3>Blue</li>
<li class="linked br">
<h3>Brown</li>
<li class="linked cy">
<h3>Cyan</li>
<li class="linked gr">
<h3>Green</li>
</ul>
<div class="SLIDER">
<div id="prev" class="pre"></div>
<div id="next" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
<div id="scndslider" class="popup">
<ul>
<li class="linked pi">
<h3>Pink</h3>
</li>
<li class="linked re">
<h3>Red</li>
<li class="linked or">
<h3>Orange</li>
</ul>
<div class="SLIDER">
<div id="prev2" class="pre"></div>
<div id="next2" class="post"></div>
<div class="BACK" onClick="history.go(-1);return true;"></div>
</div>
</div>
I am currently working on a website and am currently up to adding collapsibles.
I am having some difficulty with collapsibles as shown:
body {
align-self: center;
}
h1, p , body > ul, ol{
text-align: center;
align-self: center;
background-color: rgba(255, 255, 255, 0.6);
width: 40%;
margin: 20px 29%;
padding: 5px 3%;
}
h1 {
font-family: 'Press Start 2P';
font-size: 40px;
}
p, ul, ol {
font-family: "Turret Road";
font-size: 20px;
}
.collapsible {
background-color: #eee;
color: #000;
cursor: pointer;
padding: 8px;
width: 90%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin: 10px 5%;
}
.active, .collapsible:hover {
background-color: rgba(255, 255, 255, 1);
}
<body>
<button type="button" class="collapsible"><h1>Basic Rundown</h1></button>
<div class="content">
<p>Vaporfest is inspired by internet music genres like vaporwave, future funk and eccojams.</p>
<p>At Vaporfest, several artists will be performing music that will take you back to a better time.</p>
</div>
<button type="button" class="collapsible"><h1>What to bring</h1></button>
<div class="content">
<ol>
<li>Enough clothes for 5 days</li>
<li>Recording equipment (if you want)</li>
<li>Basic toiletries</li>
<li>Anything else you think is neccesary</li>
</ol></div>
<button type="button" class="collapsible"><h1>Security measures</h1></button>
<div class="content">
<p>Attendees will be tested for COVID every day.</p>
<p>You have to be older than 18 to attend. </p>
</div>
<button type="button" class="collapsible"><h1>Rules about camping</h1></button>
<div class="content">
<ol>
<li>Be respectful at all times.</li>
</ol></div>
<button type="button" class="collapsible"><h1>Prohibited items</h1></button>
<div class="content">
<ol>
<li>Cutlery or hard plates</li>
<li>Metal blades</li>
<li>Gas tanks, gas cylinders, jerry cans</li>
<li>Glass</li>
<li>BBQ sets</li>
<li>Unperscribed stimulants</li>
</ol></div>
<button type="button" class="collapsible"><h1>Getting there</h1></button>
<div class="content">
<p>The festival site is roughly 1 hour away from Kansai International Airport.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
When the page loads, the collapsibles are open by default, which isn't desired. I want it to be closed by default.
How do I make the collapsibles closed by default when the page is loaded?
Try using JavaScript and Jquery
<body onload=“$("#myModal").modal('hide');”>
add this CSS:
.content {
display: none;
}
I want to have a div that is displayed when I click a button.
Right now I am only able to display something that is within the button I will click, like so:
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1
<div class="submenu">
<p> TEST1</p>
</div>
</button>
</div>
<div class="mainmenu">
<button class="btn">2 <div class="submenu">
<p> TEST2</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">3 <div class="submenu">
<p> TEST3</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">4 <div class="submenu">
<p> TEST4</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">5 <div class="submenu">
<p> TEST5</p>
</div></button> </div>
</div>
If I move the div I want to display out of the button, I know that I have to adjust the javascript code to still display the div which is now not in the button anymore. unfortunately I don't know how.
So I am basically trying to display the div (which is working in the first jsfiddle) when clicking a button, but now I want to move the div out of the button. (which I tried in the second jsfiddle)
When I moved the div out of the button the code is not working. I am sure that there is a problem with my javascript but I don't know how to fix that.
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
Is it possible to do this and even align the buttons to the right but the div to the left?
Selecting the <p> tag in the CSS is wrong, as you have now moved the div outside so you have to select that like,
.active + .submenu p {
....
}
+ means the element immediately after the specified element but not
inside the particular elements.
Here is your updated code,
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active + .submenu p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
I have a menubar with 2 options which shows dropdowns on click, technically theyre all shown even you click only one. All I wanted to do is to hide other dropdowns after when I click other menu items.
What is wrong with my code?
BODY:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
font-family: verdana;
font-size: 14px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="jquery.js"></script>
</style>
The problem with your code is that it toggles both dropdowns. Therefore, when they are both not shown they get this class.
You can do something like this:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function hideDropdowns(excludeId) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) {
openDropdown.classList.remove('show');
}
}
}
function myFunction(id) {
id.classList.toggle("show");
hideDropdowns(id.id);
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideDropdowns();
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
You need something like this
jsFiddleDemoNavBar
I dont think you need to go through all that code to do what your looking for as i understand it. Just use a .hide class to hide the dropdowns by default on page load and then toggle them using the button onclick with call(this) and nextElementSibling.
Here is the code.
<style>
.hide{
display:none;
}
</style>
<body>
<ul>
<li class="File">
File
<div class="dropdown-content hide" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content hide" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<script>
var drptochoose;
function myFunction() {
var isAlreadyOpen = false;
if(!this.nextElementSibling.classList.contains('hide'))
{
// if the clicked button dropdown is already open then use this bool to not show it again.
isAlreadyOpen = true;
}
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (!openDropdown.classList.contains('hide')) {
openDropdown.classList.toggle("hide");
}
}
if(!isAlreadyOpen)
{
// if the dropdown was hidden when clicked then show it
this.nextElementSibling.classList.toggle("hide");
}
}
</script>
</body>
Hope this helps.
window.onclick = function(e) {
if (e.target.matches('.dropbtn')) {
var allDropDown = document.querySelectorAll('.dropdown-content');
//This will hide all the dropdown for everytime you click
[].forEach.call(allDropdown, function(dropdown){
dropdown.classList.add('hide');
});
//This will show the subdrop down of that menu
var dropdown = e.target.parent.querySelector(".dropdown-content");
dropdown.classList.add('show');
}
}
}