paulbe84
paulbe84

Reputation: 27

removing elements and bringing them back via .click

I am trying to build a website using just the one page. I have created 5 <section> I am using these sections as my pages. I have a nav on the right hand side which 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 have styled that list with the following CSS so it stays fixed to the left hand side of the browser window.

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

I have tried my hand at some jQuery but I am FAILING badly. What I'd ideally like is for section 1 to be displayed when the site opens. And for the rest to be hidden. When a user clicks a link, I would like that to hide all sections apart from the section the link is associated with.

I have looked at and tried the .remove / .appendTo functions with the .click but I am struggling

Upvotes: 0

Views: 109

Answers (3)

Barrie Reader
Barrie Reader

Reputation: 10713

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/

Upvotes: 0

Joe
Joe

Reputation: 15802

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

Upvotes: 1

Joel Etherton
Joel Etherton

Reputation: 37533

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/

Upvotes: 1

Related Questions