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.