title: Javascript clickable dropdown from w3schools not working with jsfiddle. Why?
body: <p>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. </p>
  
  <p>This is the code from w3schools.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .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;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Clickable Dropdown&lt;/h2&gt;
  &lt;p&gt;Click on the button to open the dropdown menu.&lt;/p&gt;
  
  &lt;div class="dropdown"&gt;
  &lt;button onclick="myFunction()" class="dropbtn"&gt;Dropdown&lt;/button&gt;
  &lt;div id="myDropdown" class="dropdown-content"&gt;
  &lt;a href="#home"&gt;Home&lt;/a&gt;
  &lt;a href="#about"&gt;About&lt;/a&gt;
  &lt;a href="#contact"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  /* 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 &lt; dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
  }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now my intention was to use the js script and apply it to two different buttons that would have the same function.</p>
  
  <p>You can view this example here. <a href="http://jz.xqlsv.com/" rel="nofollow noreferrer">http://jz.xqlsv.com/</a> specifically the meet jessica button and therapies and services.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/tsatsurg/wz8tk8rq/9/" rel="nofollow noreferrer">https://jsfiddle.net/tsatsurg/wz8tk8rq/9/</a></p>
  
  <p>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.</p>
  
  <p>Please take a look, and thanks in advance.</p>