Toggle hidden divs by clicking on navigation?

Question

How do I toggle hidden divs by clicking on nav anchors?

Please see this fiddle http://jsfiddle.net/rabelais/4rfYB/1/

I have written it the very long way round by naming each id individually, however there must be a shorter way of writing this?

$('#link1').click(function() {
    $('#1').show()
    $('#2, #3').hide()
})
$('#link2').click(function() {
    $('#2').show()
    $('#1, #3').hide()
})
    $('#link3').click(function() {
    $('#3').show()
    $('#2, #1').hide()
})

Answer 1

http://jsfiddle.net/4rfYB/2/

$('nav a').click(function() {
  $('.navLinks').hide();                 // Hide all
  $(this.getAttribute('href')).show();   // Show HREF/to/ID one
});

so you just need to get the href of your anchor (i.e. #1) and target the jQuery $() element ID represented by that href value :)

If you want a oneliner: http://jsfiddle.net/4rfYB/5/

$('.navLinks').hide().filter(this.getAttribute('href')).show();

You can also use a less flexible way using .eq() and .index() http://jsfiddle.net/4rfYB/7/

$('.navLinks').hide().eq( $(this).index() ).show();

_{Note that numeric ID are only valid in HTML5!}

Answer 2

without using nums 1,2,3

you could define it dynamically.

$('nav a').click(function() {
  $('.navLinks').hide();
  var index = $('nav a').index(this);
  $('.navLinks').eq(index).show();
})

Please see this fiddle http://jsfiddle.net/rtGk6/1/