Removing items and returning them via .click

Question

I am trying to create a website using only one page. I created 5 <section> I use these sections as my pages. I have a navigation on the right side that is fixed. Using the following:

 <ul class="navigation"> <li id="link1">ABOUT</li> <li id="link2">WHY HIRE ME</li> <li id="link3">JOURNEY</li> <li id="link4">INSTAGRAM</li> <li id="link5">CONTACT</li> </ul> 

I created this list with the following CSS, so it remains fixed on the left side of the browser window.

 .navigation{ position:fixed; z-index:1; top:20px; font-size:12px; font-family: Georgia, serif;} 

I tried my hand in some jQuery, but I DO NOT DELETE. I would like section 1 to be displayed when opening the site. And for the rest you need to hide. When a user clicks on a link, I would like it to hide all sections except the section with which the link is associated.

I looked and tried .remove / .appendTo functions with .click, but I'm struggling

Answer 1

Instead of actually deleting or adding elements, jQuery has a built-in method for hiding / showing, which sets the visibility to false, and the browser displays neighboring elements as if there were really no missing elements.

You can use it:

 $('#myelement').hide(); $('#myelement').show(); 

To make an entire group, I would provide them with a common css class (even if no style has been added to this class):

 $('.mylinkgroup1').hide(); $('.mylinkgroup2').show(); 

http://api.jquery.com/hide/

http://api.jquery.com/show/

Answer 2

Something like this HTML structure

 <div id="content_1">About content</div> <div id="content_2">Why Hire Me content</div> ... 

And this jQuery

 $('.navigation li').on('click', function () { var id = $(this).attr('id').substr( $(this).attr('id').indexOf('_') + 1 ); $('div[id^="content_"]').hide(); $('#content_' + id).show(); }); 

Answer 3

MARKUP:

 <ul class="navigation"> <li name="section1" id="link1">ABOUT</li> <li name="section2" id="link2">WHY HIRE ME</li> <li name="section3" id="link3">JOURNEY</li> <li name="section4" id="link4">INSTAGRAM</li> <li name="section5" id="link5">CONTACT</li> </ul> <div class="section" id="section1">section1</div> <div class="section" id="section2">section2</div> <div class="section" id="section3">section3</div> <div class="section" id="section4">section4</div> <div class="section" id="section5">section5</div> 

CSS

 .navigation{ position:fixed; z-index:1; top:20px; font-size:12px; font-family: Georgia, serif; } .section { display: none; } 

JS:

 $('.navigation li').on('click', function() { $('.section').hide(); //hide all sections var whichSection = $(this).attr('name'); //get the section name $('#'+whichSection).toggle(); //toggle it }); 

Jsfiddle
http://jsfiddle.net/neuroflux/LwQNR/2/