jQuery: show the metadata relevant to a file when a particular filename is clicked (show/hide, this object)

Question

I have the following HTML which is a single result which contains a filename and some metadata about the file. I want to hide the table which has class "detail-pane" initially (I know how to do this) and I want to display the panel (of class "detail-pane") that relates to the filename (e.g. H001_abcde_martin_chop.gits) when the filename is clicked . What do I need to do to get the two things related to each other, so that I can write jQuery that understands which object of class "filename" is related to which object of class "detail-pane" and does the relevant showing and hiding:

I know I am asking for a lot, but this will help solve a lot of problems for me.

The code:

<td><span class="normal"><div class="filename">H001_abcde_luther_chop.fits</div></span>
        <table id="detail1" border="0" cellspacing="0" cellpadding="6" class="detail-pane">
          <tr>
            <td><span class="normal">CTYPE1 = 'RA---SIN'&nbsp;</span></td>
          </tr>
          <tr>
            <td><span class="normal">CRVAL1 = 0.000000000000E+00</span></td>
          </tr>
          <tr>
            <td><span class="normal">CTYPE2 = &quot;DEC--SIN'</span></td>
          </tr>
          <tr>
            <td><span class="normal">CRVAL2 = -9.000000000000E+01</span></td>
          </tr>
        </table></td>

Answer 1

If the format is always like this, you can just traverse over, like this:

$(".filename").click(function() {
  $(this).closest("td").find(".detail-pane").show();
});

It's common in jquery to find related objects by their consistent position in relation to the element. In this case we're going up to the first parent <td> then finding the class="detail-pane" in it and showing. You could do .fadeIn() instead of .show() for extra effect as well.