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?

The id="keywords" element cannot repeat using that ID, what ID do you use so I can give you a correct answer? — Ohgodwhy
– Ohgodwhy, Commented Oct 17, 2012 at 23:36

Fabrício Matté · Accepted Answer · 2012-10-18 00:01:35Z

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.

edited Oct 18, 2012 at 0:01

answered Oct 17, 2012 at 23:40

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

L84 Over a year ago

One more question - Is it possible to make the div that is visible fade out when the div not visible is clicked?

Ohgodwhy · Accepted Answer · 2012-10-17 23:39:21Z

0

$(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.

answered Oct 17, 2012 at 23:39

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Comments

kmfk · Accepted Answer · 2012-10-17 23:54:04Z

0

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.

edited Oct 17, 2012 at 23:54

answered Oct 17, 2012 at 23:41

kmfk

3,9712 gold badges24 silver badges33 bronze badges

2 Comments

Fabrício Matté Over a year ago

if ( $(this).not('.shown') ) wut? You realize .not always returns a jQuery object which evaluates to true right? Use hasClass instead.

kmfk Over a year ago

@FabrícioMatté - Hah, yeah, end of the work day here, should stop trying to answer questions.

Dallin · Accepted Answer · 2012-10-18 00:19:20Z

0

$(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.

edited Oct 18, 2012 at 0:19

answered Oct 17, 2012 at 23:42

Dallin

5893 silver badges12 bronze badges

Collectives™ on Stack Overflow

Trigger a jQuery Function when linked is clicked

4 Answers 4

Explanation

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Explanation

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related