Dynamically show and hide elements

Question

I plan to have a site layout, where I have multiple sections, and each section will contain elements within it. Each section should link to a link (href) in my navigation bar, and should only be visible when such link is clicked.

How do I accomplish this?

link to my fiddle example

 <nav> <ul id="nav-menu" name="nav-menu" class="nav-menu"> <li><a href="#Home">Home</a></li> <li><a href="#Services">Services</a></li> </ul> </nav> <section id="home-text" class="home-text"> <h1>Home</h1> <p> Lorem ipsum dolor sit amet, donec dui ligula, ut elit ac tristique, vehicula sem pellentesque cubilia ante, commodo odio elit duis varius nibh in. Nam vestibulum. Vehicula id hac id viverra pellentesque, natoque elit posuere consectetuer quis etiam ligula. Nulla nam habitasse adipiscing mauris sed maecenas, ultrices magni purus posuere molestie donec, ultrices a, eget enim nec dolor lobortis quam. Est nibh est pellentesque velit, nibh quis faucibus orci a rhoncus. </p> </section> <section id="services-text" class="services-text"> <h1>Services</h1> <p> Eleifend malesuada nulla sagittis, aenean eleifend wisi suscipit adipiscing nonummy, et et a ultrices accumsan nullam proin, leo egestas lobortis mauris convallis, adipiscing odio nisl ornare lobortis massa. Odio nulla lacus vel mus penatibus a. Morbi sodales, turpis sed fermentum, nunc libero integer vel, consectetuer curae condimentum erat augue. Volutpat tortor sem consequat velit egestas, ligula sapien wisi et viverra, nulla mattis tellus ut velit, hymenaeos at nulla nunc. Enim eros leo pellentesque nisl vel mi, leo velit, amet consectetuer lacus urna volutpat dolor molestie, placerat fermentum urna lorem purus sollicitudin. </p> </section> 

Answer 1

You can set visibility of an element to hidden with either

display: none

or visibility: hidden

(the last one the element will take space).

In Javascript you can set an element display none (or otherwise) with something like:

   document.getElementById('home-text').style.display = 'none';

So this would be a working code (which could be improved with a selector in display function, which I leave it to you):

https://jsfiddle.net/adamovic/cj24qgf3/