Develop Reference

Why does adding a second dropdown mess up the JS to close menu when user clicks outside it?

I'm not super familiar with JS. I used the W3Schools tutorial for creating an on-click dropdown menu as a reference and added a second menu. However, only the second dropdown menu listed in the javascript maintains the functionality of closing when the user clicks outside the dropdown. (I can switch the order of the functions listed in the JS, and changing nothing else, that switches which menu has that close-when-click-outside functionality.)
Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1,
.dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
Thank you!

You are only allowed to have one onclick.
The second will overwrite the first
Instead use eventListener and delegation
Notice I removed the inline click and I now only have one class instead of a class per button
window.addEventListener("load", function() {
// click the dropdown if the user clicks outside it unless that is a button
document.addEventListener("click", function(e) {
const tgt1 = e.target.closest('.dropdown-content');
const tgt2 = e.target.closest('.dropbtn');
if (!tgt1 && !tgt2) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
}
})
document.querySelector(".navbar").addEventListener("click", function(e) {
const tgt = e.target.closest("button");
if (tgt && tgt.matches('.dropbtn')) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
document.getElementById(tgt.dataset.id).classList.add('show');
}
})
})
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" data-id="drop1">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" data-id="drop2">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

📌 Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
✨ I'm going to make the smallest possible change to your code to make it work, so that you can best learn what happened. I'm not going to redesign your approach.
window.onclick is a variable, and you are assigning a value to it twice. The second function you assign it, for Dropdown 2, overwrites the first, which was for Dropdown 1.
The problem is easily solved by combining the logic into one function assigned to window.onclick as below.
Another simple, and probably better fix, is to use window.addEventListener("click", function(event) { }) rather than window.onclick.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1, .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

Dropdown not appearing on click

I am trying to add a dropdown menu so when the page is viewed on mobile the user can click and access all the pages available. I am not getting any type of error code, just no response. Below are the snippets of HTML, CSS and JavaScript that should be affecting the code. Thanks for taking the time to read through this.
/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown() {
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
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');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown()" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>

/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown(event) {
event.stopPropagation();
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
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');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown(event)" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>

How to make font awesome icon clickable event

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
DROPDOWN CONTENT
DROPDOWN CONTENT
DROPDOWN CONTENT
</div>
</div>
</body>
Dear stackoverflow, I am currently coding a top nav bar, with this menu drop-down button, this code works fine, however when clicking the WHITE part of the font awesome icon, it does not trigger the javascript event.
Is there any way to make the menu icon clickable too? or let it be invisible to mouse pointer events.
thank you x

The problem with your current code is that the icon is rendered as a svg within the button. This is an independent element and the onclick attribute does not apply to it.
The best way to solve this is to explicitly set the pointer-events to none for the icon SVG:
.dropbtn > svg {
pointer-events: none
}
The pointer-events property dictates how the UI should respond to events on the object. By setting it to none, we are saying that this object does not process events and they are therefore passed to the object underneath the SVG.
The working snippet showing this can be seen below.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
.dropbtn > svg {
pointer-events: none
}
<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
DROPDOWN CONTENT
DROPDOWN CONTENT
DROPDOWN CONTENT
</div>
</div>
</body>

I mean this could be a simple solution or i might be wrong but this might work. Putting this css code on the menu icon:
pointer-events: none;
Hopefully this helps.

Select multiple text using jquery

I'm having 2 problems
I'm able to select One word, but I want to select multiple words (next to each other)
with my mouse and then highlight them, and then the dropdown should appear the way that we get with clicking on one word.
when I select one word, the drop-down appears, when I click on the other it is making the 2nd word in red color but the drop-down is gone. I'm unable to know how to change the toggle thing. Any word I select, it should be red and show drop-down. and if there is no red text, there should be no drop-down...
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function() {
$(this).toggleClass('active');
document.getElementById("myDropdown").classList.toggle("show");
//$(this).css("background-color", "yellow");
});
.active {
color: red;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
/* user-agent specific */
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
/* etc... */
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> About Base Blog Contact
Custom Support Tools
</div>
Here is the working example: JsFiddle

Please try this js code
<script>
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function() {
$(this).toggleClass('active');
if ($( this ).hasClass( "active" )) {
$("#myDropdown").show();
} else {
if ( ! $("p:first span").hasClass("active")) {
$("#myDropdown").hide();
}
}
//$(this).css("background-color", "yellow");
});
</script>
This may will help you

Check the previous and next span for the class active. If at least one of these two conditions are true then add the show class, else remove it:
$("span").click(function() {
$(this).toggleClass('active');
if ($(this).next().hasClass('active') || $(this).prev().hasClass('active'))
document.getElementById("myDropdown").classList.add("show");
else
document.getElementById("myDropdown").classList.remove("show");
//$(this).css("background-color", "yellow");
});
Demo https://jsfiddle.net/ytnhvoak/1/

HTML select field with filter

I have a select field where a large amount of published names, could reach hundreds.
What I need is to filter the field, I mean:
That if one was selected and searched, displayed as sample texts for forms and with the possibility of writing a new search deleting the sample text searched before.
That fence as typing the text in the box will display the filtered list of options for the text.
An example would be: if I type D or d in the text box, it displays the list of options Daniel Diego, so for all, and that if you search with Diego then after loading the search text box appears as example Diego.
<select id="id_name" name="name">
<option value="3">Diego </option>
<option value="4">Daniel </option>
<option value="5">Fernando </option>
<option value="6">Luz </option>
<option value="7">Catherine </option>
<option value="8">Samuel </option>
<option value="10">Eduardo </option>
</select>

Try this.
Chosen is a jQuery plugin for the <select> html tag.
Not only does it make your select boxes look nicer, but it adds a very nice search feature at the top of the select box.
The source/demo is found here: https://harvesthq.github.io/chosen/

If you want to go with jQuery then these are great UI options available :
https://select2.org/dropdown
https://jqueryui.com/selectmenu/
https://harvesthq.github.io/chosen/
If you want to use Vanilla JavaScript (without jQuery). This is the best option.
You can customise the colours and button layout as per your choice.
More info
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<!DOCTYPE html>
<h2>Basic Select Search/Filter Dropdown</h2>
<p>
Click to open the dropdown menu, and use the input field to search for a specific dropdown link.
</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select Here</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>

I guess this exactly what you're looking for
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>