How do I use a function argument for this jquery code, or is there a better solution?
<p>I have about 50 p tags and next to these are again 50 divs. on click of each p tag, its div should be shown and the rest hidden. How do i acheive this. I can use something like below:</p>

<pre><code>$(function() {
  $('.p1').click(function(){
  $('.div1').show();
  $('.div2','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
$('.p2').click(function(){
  $('.div2').show();
  $('.div1','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
//////////////
//////
})
</code></pre>

<p>but as you see that this is not an effiecient solution. I am also not sure how the jquery <code>each</code> can be leveraged here or how can this implementation be done using arrays. Can somebody point me in the right direction. I think we should use a function and pass that no. as a parameter, but I dont know how to use custom functions in jquery.</p>

<p><strong>UPDATE:</strong></p>

<p>This is what I have done</p>

<pre><code>$(function() {
        $('.p1').click(function() {
            $('.div').hide();
            $('.d1').show();
        })
    })
</code></pre>

<p>I have added the class div to all of my 50 divs and I am showing d1 on click of p1. Now how do I replace 1 for each instance till 50.</p>
