We Keep Coding

Hide a dropdown menu OnClick

I have a dropdown menu, one of the options executes Ajax to show data in another Div.
I want to hide the dropdown menu (close it) when this option is clicked.
<div class="dropdown">
<a href="#" class="btn btn-floating" data-toggle="dropdown">
<i class="ti-more-alt"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" >
View Folder Details
Share Folder via Email
Rename Folder
Delete Folder
</div>
</div>
I have tried the below which I found online, but it doesn't seem to close the menu:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(){
$(".dropdown-menu").hide();
});

$( document ).ready(function() {
debugger;
var ele=$(".dropdown-content");
$(".dropdown-content a").click(function(){
if(this.innerText=="Link 2"){
$(".dropdown-content").hide();
$(".dropbtn").hide();
}
});
});
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You hide a dropdown menu like this and if you want to show simply add show functionality.

Try this toggle method should work
<a href="#" onclick="handleClick()" class="btn btn-floating" data-toggle="dropdown">
how/hide menu
</a>
function handleClick(){
$(".dropdown-menu").toggle();
}
refer to this link for running example:
https://playcode.io/647558/

Just remove class 'show' from dropdown:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(el){
$(el.target).parents(".dropdown").removeClass("show");
});

Click on the multiple button to open the dropdown menu in same place

I am a web developer. Now I am developing, my new project but I am having problems. I have created an ebook viewer list. Here are some problems. Some buttons are included such as [Download, Bulk Download, Save to Library and “More”]. Everything is fine but the [more] buttons are not working properly.
I want the list of all my books to be created by clicking on the [more] icon so that the list of [more] buttons can be seen in the right place.
The first list is working properly but I have made a list of other ebook viewers. It is not working properly. Clicking on the [More] button opens the first book list button.
I need help from an expert developer. Here is my project screenshot and source code
view screenshot
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.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: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>

Hello #Sajjad Hosen This is probably far to late. But because there are other people that want answers to such questions I will put in my two-penny worth. Beginner to beginner.
You have two flaws. The first is that you are using the same id ("myDropdown") for all your four menu buttons. Then the browser engine finds the first and that's it. That is why it always opens the first submenu.
The second: it is your function myFunction that has a flaw:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
This will always find the same element with id (supposedly only one in the DOM). You need to use this keyword to refer to the element that was clicked. So your buttons would now look like:
<button onclick="myFunction(this)" class="dropbtn">Dropdown</button>
You pass as a paramenter the very element you clicked on.
Now, you have to traverse to your "myDropdown" elements because this refers to a button and not a menu.
function myFunction(el) {
el.nextSibling.nextSibling.classList.toggle("show");
console.log(el);
}
As you see, your function now uses el as parameter. We need to use two .nextSibling properties. In your case you divided the </button> closing tag and next <div> tag with whitespace (new line). This is treated as text which is considered as a new element in DOM. Only the next .nextSibling property finally gets your menu element.
Some people advertise such usage of tags: </button><div>. Tags are then together.
I am inclined to make as much of this front end code with CSS. So perhaps I could propose my solution. Although there are differences. Here I show only one menu button. And after a click in your solution the submenu remains open. In my solution it is there only as long as a cursor hovers above the Dropdown button and its menu. A warning though for those that will expand a solution for more buttons: you should also change the id's of elements.
If someone finds flaws in my solution I'd be happy to hear from them.
.wrapper {
position: absolute;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
}
#menubutton {
z-index: 1;
opacity: 0.99;
position: absolute;
top: 5vh;
width: 100%;
background-color: green;
color: white;
text-align: center;
padding: 1em 0em;
cursor: pointer;
height: 1.25em;
border-radius: 0.3125em;
}
#menu {
z-index: 0;
opacity: 0.99;
position: absolute;
left: 0em;
top: 5vh;
text-align: center;
width: 100%;
height: 1.25em;
background-color: transparent;
color: #fff;
padding: 0;
transition: height 1s;
border-radius: 0.3125em;
overflow: hidden;
}
.rows {
position: absolute;
width: 100%;
height: 1.25em;
display: block;
margin-left: auto;
margin-right: auto;
padding: 1em 0em;
border-radius: 0.6125em;
background-color: green;
cursor: pointer;
}
#menuItem1 {
bottom: 7.2em;
}
#menuItem2 {
bottom: 3.6em;
}
#menuItem3 {
bottom: 0em;
}
#menubutton:hover+#menu,
#menu:hover {
height: 14.0em;
}
<div class="wrapper">
<div align="center " id="menubutton">Dropdown
</div>
<div id="menu">
<div class="rows" id="menuItem1">Home</div>
<div class="rows" id="menuItem2">About</div>
<div class="rows" id="menuItem3">Contact</div>
</div>
</div>

populate a drop down menu list

I have the following [fiddle][1]. I am trying to achieve two things & I have fallen at the first hurdle.
I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?
The end goal is where one of the regions is clicked on a javascript function will be called
$(document).ready(function () {
var $region = $('#regionList');
$region.append('<li><a>Europe</a></li>');
$region.append('<li><a>Japan</a></li>');
$region.append('<li><a>North America</a></li>');
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
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: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>

jQuery is not defined, you'll need to include jQuery if you want to use $.
$ is not defined
http://jsfiddle.net/d2v7fLpj/

How to make dropdown menu responsive?

Hi I am trying to create a dynamic dropdown menu inside a table. I am trying to implement a simple dropdown menu in w3schools.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown1").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: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
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;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<table>
<tr><td>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<tr><td>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<table>
two dropdown appears but takes the same position. Can someone help me with responsive positioning of this dropdown menu? Thanks in advance

made a JQ script and it works as you want
Explanation
this script works with any number of .dropdowns
so, on click on each button with class .dropbtn first we find the corresponding .dropdown-content , the one that should open when clicking on the respective button.
for that we use the sibling() method which selects the ' brother ' with class .dropdown-content of the clicked button. and then. using the slideToggle() method, we hide and show on click the before-found .dropdown-content .
but we also need to close previously opened .dropdown-contents when clicking and opening another .dropdown-content .
in order to do that, we need to find the already opened .dropdown-content ( if there is one ) and close it. so we use the parents() method to find the grandparent ( tr ) of the current clicked button . that's why we use parents() instead of parent() which only selects the immediate parent not all ancestors.
after finding the grandparent, with siblings() we find the other trs, and inside them we find() the .dropdown-content that is visible, using filter() method together with the :visible selector. To this found div with class .dropdown-content that is visible, we apply the slideUp() method that hides it and so, only the dropdown that corresponds to the last clicked button is being shown
$(".dropbtn").on("click",function(){
var showMe = $(this).siblings(".dropdown-content")
$(showMe).slideToggle()
var visible_drop = $(this).parents('tr').siblings().find('.dropdown-content').filter(":visible")
$(visible_drop).slideUp()
})
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
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;
}
.dropdown a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<table>
<tr><td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<tr><td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<table>

I think your problem is that all the dropdown have the same id, and there is a conflict with the js code.
document.getElementById("myDropdown").classList.toggle("show");
When you click over the dropdown the js allways open the first element and not the second. So you will need to change the id to make it unique or change the selection of the element you want to show.

The same JS function is called from the two buttons. When you click on one button, myFunction is called and it displays the two dropdown-content at the same time. To correct this, you have to call a different function from each button, something like this :
function myFunction() {
document.getElementById("myDropdown1").classList.remove("show");
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction1() {
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown1").classList.toggle("show");
}
I don't really like this solution though... Also, I think you should keep the two buttons in the same table row so the dropdown content doesn't appear oddly for the first button.

How can I use javascript, html and css to make an image a button, which can do the following?

When it is clicked, it should open a drop down menu, containing links.
Please provide the full code as well.
Here is the code for the image/button that I have:
<div class="navBar">
<img src="nav_icon.jpg" class="navButton" alt="Navigation Links">
<div class="dropdown-content">
Home
Get Involved
About Us
Contact Us
</div>
</div>
Here is the CSS part (which isn't really relevant:)
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.navButton{
height:20px;
width:20px;
}
.navBar{
float:right;
height: 10px;
width:20%;
padding-top:4.2%;
position: relative;
display: inline-block;
}
I've tried the following example, which instead of creating what I want, makes all the links appear:
W3 Schools

From the HTML that you have provided, If you compare your markup with W3School's Example, I see two problems that are causing your menu not to work properly. I've listed them below:
There should be an id attribute on drop down menu.
<div id="myDropdown" class="dropdown-content">
// ^^^----- This id attribute should be added.
You forgot to add click event handler on .navButton that will toggle drop down menu each time it is clicked.
<img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">
// ^^^ Add this inline click handler
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.navButton')) {
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');
}
}
}
}
/* Dropdown Button */
.navButton {
height:20px;
width:20px;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 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: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 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="navBar">
<img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">
<div id="myDropdown" class="dropdown-content">
Home
Get Involved
About Us
Contact Us
</div>
</div>