doubt in dropdown using java script

Question

The following is a code of javascript for a drowndown function:
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');
}
}
}
}
i got the rough idea of it, but these terms are a bit new.
another thing plz explain 'show'(i get it thats it for display).
i could have just used java script to change the value of diplay(none to block) and then when the use clicks somewhere else vice versa.
ps: i think that loop is to kill all dropdowns.

Answer 1

The "show" part is the class name. So within your CSS you will have a class called show with a value of display:block.

Use my below codepen if you need.

https://codepen.io/ihateonions/pen/xXgmdr