jquery - Show one div and hide others on clicking a link

Question

I have a list with 37 links and 37 hidden divs with some text. The counter starts with 3 and ends with 40. What I would like to do is to display a div when I click a link and also hide all the other divs.

Links look like this:

<a href="#" rel="week_3">Week 3</a>
<a href="#" rel="week_4">Week 4</a>

Divs look like this:

<div id="week_3" style="display: none">[...]</div>
<div id="week_4" style="display: none">[...]</div>

I would like to perform this task using jQuery. What I don't know how to do is make a loop and check if any of those links have been clicked.

Answer 1

Something along the line of :

$('a').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings("div").hide();
});

Should do the trick.

P.S: your divs have to be in a container for this to work. Fiddle.