Trigger a jQuery Function when linked is clicked

Question

I have a comparison table that has about 20 items. I would like when a link is clicked it will show more information on that item. I can do this by using the following function:

$(function(){
  $('.show').click(function() {
    $('#keywords').fadeIn('slow');
 });
});

However as I mentioned there are twenty items and repeating the above code could get cumbersome.

How do I create a function that would show the div below the link that is clicked? On top of that if a div is open or visable and another item is clicked I want the other item to close or fade out and then the other to show.

Here is my HTML for part of the page:

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#"> Mobile Keywords</a>
    </div>
      <div id="keywords" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#">Another Category</a>
    </div>
      <div id="category-2" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

I assume this can be done using the this property but I do not know how to implement this as I am not familiar enough with JS.

To summarize: How do I have a link in this table that will be clicked and then the link shows the appropriate div without having to create a repeat the code for every item?

Answer 1

Try

$('.show').click(function() {
    $('.hide').hide();
    $(this).closest('td.cat').find('.hide').fadeIn();
});

Fiddle

edit: Added hide functionality as requested in the question.

---

Explanation

In the code above, this references the element that triggered the click event handler (the clicked anchor element).

Then, this is wrapped inside a jQuery object and we traverse the DOM tree up to a common ancestor using the .closest method, from there we find the hidden element to display.

The $('.hide').hide() in the first line is self-explanatory, it hides all elements with the hide class before animating the fadeIn of the one to be displayed.

Answer 2

$(function(){
    $('.show').click(function() {
        $(this).parent().next('div').fadeIn('slow');
    });
});​

Utilizing the .parent() method, we can traverse up the dom one level, then using .next() we get the next immediate div, which seems to follow sequence with your markup.

Answer 3

Using your HTML markup, this might work. Will hide currently shown div, only if its not the same element and show the desired one.

$(function(){
  $('.show').click(function() {
    if ( !$(this).hasClass('shown') )
    {
        $('.shown').removeClass('shown').parent().siblings('div').hide();
        $(this).addClass('shown').parent().siblings('div').fadeIn('slow');
    }
 });
});​

Edit : working code.

Answer 4

$(function(){
  $('.show').click(function() {
    $('.hide').hide();
    $(this).parent('div').next('div').fadeIn('slow');
 });
});

Uses this (as you expected), looks for its parent div, and then looks for its first sibling div.

Edited to include the hide functionality.