title: Should I use onclick for hiden/showing different sections on my website?
body: <p><strong>Problem Statement:</strong></p>
  <p>Imaging that each of the list items should show a new section, and hide the previous shown one. Eg. I click on <code>Home</code>&quot; which will result in the currently shown one <code>Portfolio</code> now will be sat to <code>visibility:none;</code>, and the now requested section <code>Home</code> will be sat to <code>visibility:visible;</code></p>
  <p><strong>Why I am asking:</strong></p>
  <p>I am a newbie to javascript and therefor have a very limited tool belt. For that reason I am asking you all-knowingly javascript gods for help.</p>
  <ul>
  <li>What would be the best way to achieve my problem statement?</li>
  </ul>
  <p><strong>My (idea) approach:</strong>      <em>(You don't have to read this)</em><br />
  I was thinking about creating a <code>onclick</code> for each nav item that would trigger a javascript function. The javascript function would hide all sections, and depending on which onclick was clicked show that one section from the calling onclick. Is this a good approach? The draw back is that I am explicitly setting <code>visibility: none;</code> for all sections for each call. I assume that this could be a little cost expensive, or at least not the optimal solution.</p>
  <p><a href="https://i.stack.imgur.com/twn5K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/twn5K.png" alt="enter image description here" /></a></p>
  <p><em>I do not assume that the html and css of the website on the picture is necessary to share here. But if it is, please write a comment saying that I should show it anyway.</em></p>