JavaScript .click() not changing CSS "display" property

March 29, 2022

I’m trying to make a navigation bar which on click to make visible a div that has been previously hidden with display: none. Below is what I have till now:

Navigation bar:

$(document).ready(function() {
      $('#home').click(function() {
        $('.site-content').html($('#home_wrap'));
      });

      $('#skills').click(function() {
        $('.site-content').html($('#skills_wrap'));
      });

#home_wrap,
#skills_wrap {
  display: none;
}

.site-content {
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="nav__content">
  <ul class="nav__list">
    <li class="nav__list-item" id="home" href="#">Home</li>
    <li class="nav__list-item" id="skills" href="#">Skills</li>
  </ul>
</div>

As this is an old project, I think the navigation used to work but now it’s not.