Question

On my page, I put two divs: nav and contents.
Inside “nav”, I have 10 links. Each one called like “link1”, “link2”,….
Inside “contents”, I have 10 contens divs. Each one called ilke “divarea1”, “divarea2”,….
When I click link, new contents will fadein.
My jquery code is like:

$("#link1").click(function(){
  $("#divarea0,#divarea2,#divarea3,#divarea4,#divarea5,#divarea6,#divarea7,#divarea8,#divarea9,#divarea10").hide();
  $("#divarea1").fadeIn(3000);
});
$("#link2").click(function(){
  $("#divarea0,#divarea1,#divarea3,#divarea4,#divarea5,#divarea6,#divarea7,#divarea8,#divarea9,#divarea10").hide();
  $("#divarea2").fadeIn("fast");
});

This way works. But I know this is a stupid way. Someone can tell me how to do this in a simple way? thx

Answer 1

 $('#nav a').click(function(){
var idlink = $(this).attr('id').substr(4,2);
$('#contents div').hide();
$('#divarea"+idlink).fadeIn();

}

First, you listen to the click event on all the link in your #nav div. Then, on click, you get the id attribute and substract all the characters you don’t need to only get the ‘index’ of the link.
You hide all the div in your #contents and fadeIn all #divarea that you want by using the index you got two lines before.

I’m not sure it’s the best way, but it’s better and it should work ! 🙂