Line 5: | Line 5: | ||
/* When the user clicks on the button, | /* When the user clicks on the button, | ||
toggle between hiding and showing the dropdown content */ | toggle between hiding and showing the dropdown content */ | ||
− | function myFunction() { | + | function myFunction(id) { |
document.getElementById("myDropdown").classList.toggle("show"); | document.getElementById("myDropdown").classList.toggle("show"); | ||
} | } | ||
// Close the dropdown if the user clicks outside of it | // Close the dropdown if the user clicks outside of it | ||
− | window.onclick = function( | + | window.onclick = function(e) { |
− | + | if (!e.target.matches('.dropbtn')) { | |
− | + | var myDropdown = document.getElementById("myDropdown"); | |
− | + | if (myDropdown.classList.contains('show')) { | |
− | + | myDropdown.classList.remove('show'); | |
− | + | } | |
− | + | } | |
− | + | } | |
</script> | </script> | ||
Line 380: | Line 380: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
<button class="dropbtn" onclick="myFunction('5')">Awards | <button class="dropbtn" onclick="myFunction('5')">Awards | ||
− | <i class=" | + | <i class="fa fa-caret-down"></i> |
</button> | </button> | ||
<div class="dropdown-content" id="myDropdown"> | <div class="dropdown-content" id="myDropdown"> |
Revision as of 06:10, 27 October 2017