Digggid Digggid - 6 days ago 6
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.

<html>
<head>
<style>
.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;}
</style>
</head>
<body>

<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>
</div>
</div>

<script>
/* 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');
}
}
}
}
</script>

</body>
</html>


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.

https://jsfiddle.net/tsatsurg/wz8tk8rq/9/

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

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')) {
      openDropdown.classList.remove('show');
    } else if (event.target == document.querySelector('.dropbtn')) {
      openDropdown.classList.add('show');
    }
  }
};
Comments