jquery selector needed to select next table from element

Question

hi, I need a selector that basically starts at the element that I have clicked and finds the next item with a certain class on the page. See my example below:

<table>
<tr>
<td>Blah blah blah</td>
<td><p class="click">Fire jquery</p></td>
</tr>
</table>

<table class="hidden">
<tr>
<td>blah blah blah</td>
<td>blah blah blah</td>
</tr>
</table>

$(document).ready(function() {

$('.hidden').hide()

$('.click').click(function() {
$(this).next('.hidden').fadeIn()
})

})

So basically i want to hide everything with the class of hidden when the page loads. Then when something with a class of click is clicked it should scan down the page for the next element with a class of hidden and fade it in. I would just do ('.hidden').fadeIn() but iv got more than one hidden item so it fades all of them in and I only want the next one to be faded in.

Hope you understand all this, I will be very grateful for anyone that can help

Thanks

Answer 1

next('.hidden') fails because it searches for immediate siblings - that is, on the same <td> as the click element.
Try finding the <table>, and look for its sibling:

$(this).closest('table').next('.hidden').fadeIn();

or

$(this).closest('table').next('.hidden:hidden').fadeIn();

If you want to create a semantic connection between a click and its hidden, consider wrapping them both in a div, for example:

<div class="Group">
  <p class="click">Fire jquery</p>
  <table class="hidden" />
</div>

$(this).closest('.Group').find('.hidden').fadeIn();