How can you toggle the visibility of multiple divs? - toggle

Question

I am trying to toggle the visibility of six divs that contain vowels. I don't understand why I can't select multiple elements using the code below:
<div class="grid-container">
<div class="grid-item item-1 vowel">A</div>
<div class="grid-item item-2 consonant">B</div>
<div class="grid-item item-3 consonant">C</div>
<div class="grid-item item-4 consonant">D</div>
<div class="grid-item item-5 vowel">E</div>
<div class="grid-item item-6 consonant">F</div>
<div class="grid-item item-7 consonant">G</div>
<div class="grid-item item-8 consonant">H</div>
<div class="grid-item item-9 vowel">I</div>
<div class="grid-item item-10 consonant">J</div>
<div class="grid-item item-11 consonant">K</div>
<div class="grid-item item-12 consonant">L</div>
<div class="grid-item item-13 consonant">M</div>
<div class="grid-item item-14 consonant">N</div>
<div class="grid-item item-15 vowel">O</div>
<div class="grid-item item-16 consonant">P</div>
<div class="grid-item item-17 consonant">Q</div>
<div class="grid-item item-18 consonant">R</div>
<div class="grid-item item-19 consonant">S</div>
<div class="grid-item item-20 consonant">T</div>
<div class="grid-item item-21 vowel">U</div>
<div class="grid-item item-22 consonant">V</div>
<div class="grid-item item-23 consonant">W</div>
<div class="grid-item item-24 consonant">X</div>
<div class="grid-item item-25 vowel">Y</div>
<div class="grid-item item-26 consonant">Z</div>
`
//toggle vowels
const toggleVowelsButton = document.getElementById('button9');
toggleVowelsButton.addEventListener('click', hideVowels);
function hideVowels() {
let vowels = document.getElementsByClassName('vowel');
if (vowels.style.visibility === "hidden") {
vowels.style.visibility = "visible";
}else {
vowels.style.visibility ="hidden";
}
}
Any advice on how to select and manipulate multiple elements would be greatly appreciated.

Answer 1

document.getElementsByClassName() returns an HTMLCollection, which you have to iterate through. Here is a working solution (also see pen):
function hideVowels() {
let vowels = document.getElementsByClassName("vowel");
for (let i = 0; i < vowels.length; i = i + 1) {
let vowel = vowels[i];
if (vowel.style.visibility === "hidden") {
vowel.style.visibility = "visible";
} else {
vowel.style.visibility = "hidden";
}
}
}
hideVowels();
I would also recommend looking at this question.
When you get more comfortable with web basics, I highly recommend using a frontend framework for stuff like this. My favorite is VueJS.