Removing Elements And Bringing Them Back Via .click

I am trying to build a website using just the one page. I have created 5

I am using these sections as my pages. I have a nav on the right hand side which is fixed.

Solution 1:

Rather than actually removing or appending elements, jQuery has a method built in to hide/show which sets their visibility to false and the browser renders adjacent elements as if the missing elements truly weren't there.

You can use it:

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

To do an entire group, I would provide them with a common css class (even if no style is attached to that class):

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

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

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

Solution 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();
});

Solution 3:

MARKUP:

<ulclass="navigation"><liname="section1"id="link1">ABOUT</li><liname="section2"id="link2">WHY HIRE ME</li><liname="section3"id="link3">JOURNEY</li><liname="section4"id="link4">INSTAGRAM</li><liname="section5"id="link5">CONTACT</li></ul><divclass="section"id="section1">section1</div><divclass="section"id="section2">section2</div><divclass="section"id="section3">section3</div><divclass="section"id="section4">section4</div><divclass="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 sectionsvar whichSection = $(this).attr('name'); //get the section name 
  $('#'+whichSection).toggle(); //toggle it
});

JSFiddlehttp://jsfiddle.net/neuroflux/LwQNR/2/