jquery - Hide/Show content with many variables -

i'm using jquery reveal/hide content on click event follows:

$('#staffer1').click(function() {     $("#staff1").show();     $("#staff2").hide();     $("#staff3").hide(); });       $('#staffer2').click(function() {     $("#staff2").show();     $("#staff1").hide();     $("#staff3").hide(); });   $('#staffer3').click(function() {     $("#staff3").show();     $("#staff1").hide();     $("#staff2").hide();     }); 

this issue lies in volume. if have 60 staffers, there way circumvent listing out 60 lines each click event?

html so:

<div> <p><a id="staffer1">staff name 1</a></p> <p><a id="staffer2">staff name 2</a></p> <p><a id="staffer3">staff name 3</a></p> </div>  <div id="staff1"> <div class="slider"> <img src="image.jpg"> </div> <div class="staff_bio"> <p>nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p> </div> </div>    <div id="staff2"> <div class="slider"> <img src="image.jpg"> </div> <div class="staff_bio"> <p>nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p> </div> </div>   

add class called staff each staff element , use hide others:

$('#staffer1').click(function() {     $(".staff").hide();     $("#staff1").show(); }); 

even better, have staffer class , can have single handler everything:

$('.staffer').click(function() {     $(".staff").hide();     var num = $(this).attr(id).replace(/staffer/, '');     $("#staff"+num).show(); }); 

i don't know html looks like, there other ways can well, such using data- , .data() store/retrieve staff number:

http://jsfiddle.net/hcvwq/

using .index() figure out .staffer clicked:

http://jsfiddle.net/zmxqx/

or, using html structure associate link/button info, in example:

http://jsfiddle.net/kde9j/