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

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.

javascripthtmlcss


Solution 1:[1]

Try to use: $('#home_wrap').show()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexandre Provensi

Related Questions