Digggid Digggid - 1 year ago 158
CSS Question

Javascript clickable dropdown from w3schools not working with jsfiddle. Why?

Hey I hope someone comes by this and will be able to help me out or give me a few pointers.. This is a strange situation, I was looking for javascript code that would allow me to open a div once clicked then disappear if I click anywhere.

This is the code from w3schools.

.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;}

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {

// 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')) {


Now my intention was to use the js script and apply it to two different buttons that would have the same function.

You can view this example here. http://jz.xqlsv.com/ specifically the meet jessica button and therapies and services.

Now the meet jessica button works perfectly as the therapies and services one does not close when i click anywhere.. but you will notice that the css does change on the button but the div does not go away as the meet jessica button.

I have even tried to implement this script to jsfiddle, with the exact replica from w3schools. But it does not seem to work at all.


If anyone can help out with this I would greatly appreciate it.
The site is currently being developed in Wordpress if that helps at all.

Please take a look, and thanks in advance.

Answer Source

Following your fiddle: let the class show be added when it's not present, currently you are only making it be removed. All the Javascript your fiddle needs is:

window.onclick = function(event) {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
    } else if (event.target == document.querySelector('.dropbtn')) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download