So I have a menu, I want it to display information accordingly, for example:
<ul id="menu-list">
<li id="about-me"><a href="#">About Me</a></li>
<li id="skills"><a href="#">Skills</a></li>
<li id="experience"><a href="#">Experience</a></li>
<li id="education"><a href="#">Education</a></li>
<li id="projects"><a href="#">Projects</a></l>
<li id="contacts"><a href="#">Contacts</a></li>
</ul>
and on my JS file I did this in order to access "li" elements:
let navMenu = document.getElementById("menu-list");
let menuList = navMenu.getElementsByTagName("li");
let skillsButton = document.getElementById("skills");
let skillsEvent = document.getElementById('main-section-skills').hidden = true;
(text that will display on click is pre-set to hidden = true)
The goal is to iterate through "li" items to find which one of those has ".hidden = false" value and change it to ".hidden = true" so that when you click on different menu buttons, each button will so only relevant info and others that are not relevant will bi hidden.
Thanks for your help.
You can get the array of children using element.children
https://developer.mozilla.org/en-US/docs/Web/API/Element/children
for (let child of navMenu.children) {
your logic here
}
For checking the class you can use element.hasClass or even:
element.style.display = 'none'
element.style.display = 'block'