Question

I have a table structure:

<tr>
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data
  </td>
</tr>
<tr>
  <td> 
    <img src="#" class="cc" />
  </td>
</tr>
<tr>
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data2
  </td>
</tr>
<tr>
  <td> 
    <img src="#" class="cc" />
  </td>
</tr>

Now, on load, 2nd and 4th row are hidden. On click of <a> its immediate next rows <img> should come into display.

For that i have written:

$("a.xx").click(function (event) {
  $(this).next(".cc").toggleClass();// not working
});

Any clue?

EDIT:

On click of 1st row’s <a>, it should show 2nd row’s <img> and on click of 3rd <a>, it should show 4th row’s <img>, and only one <img> at a time.

CSS

.cc {
  display: none;
}

Answer 1

EDIT: Based on further clarification, you want a second click to close an open image.

Do this:

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .closest('tr').siblings('tr').find("img.cc").hide();

or this, which is a little more efficient:

$(this).closest('tr').next('tr').find("img.cc").toggle(0, function() {
       var $th = $(this);
       if( $th.is(':visible') )
           $th.closest('tr').siblings('tr').find("img.cc").hide();
});

---

EDIT: Based on clarification, seems like you want to show the image in the next row, and hide the rest.

Do this:

$(this).closest('tr').next('tr').find("img.cc").show()
       .closest('tr').siblings('tr').find("img.cc").hide();

• http://api.jquery.com/siblings/

---

Original answer:

Do this:

$(this).closest('tr').next('tr').find("img.cc").toggleClass('someClass');

jQuery’s .next() only looks at the siblings of the element.

You need to traverse up to the .closest() <tr> element, get the .next() row, then .find() the .cc element.

• http://api.jquery.com/closest/
• http://api.jquery.com/next/
• http://api.jquery.com/find/

I also assume you’re passing a class name to .toggleClass() instead of calling it without an argument.

Otherwise, to display the <img> you would probably use .show().