Question

I’m using a table in a signup form and want to show the table rows within <div class="collegeInfo"> when input id "profile_higher_ed" is focused. I found a few answers to similar questions on here like this one. However when I adapted the jQuery it wasn’t hiding the table rows when the input wasn’t focused.

Here is the HTML produced by my form:

<tr>
  <td class="label"><label for="profile_higher_ed">College:</label></td>
  <td>
    <input id="profile_higher_ed" name="profile[higher_ed]" size="32" type="text" />
  </td>
</tr>
<div class="collegeInfo">
<tr>
  <td class="label"><label for="profile_major">Major:</label></td>
  <td>
    <input id="profile_major" name="profile[major]" size="32" type="text" />
  </td>
</tr>
<tr>
  <td class="label"><label for="profile_major">Grad Year:</label></td>
  <td class="select">
    <select id="date_year" name="date[year]">
      ...
      <option value="2011">2011</option>
    </select>
  </td>
</tr>
</div>

Here is the jQuery I adapted:

$("#profile_higher_ed").focusin(function() {
    $("div.collegeInfo").show();
}).focusout(function () {
    $("div.collegeInfo").hide();
});

Is the problem that I’m using <tr> within the <div>?

Answer 1

Yes, the <div> with the <tr> element in between is a problem (it’s not valid).
I made a JS Fiddle for you. If I understand the problem correctly this is what you want: http://jsfiddle.net/cJRrx/5/

I put a class on the two <tr> elements and changed your jQuery a bit to be

$(document).ready(function(){
    $("tr.collegeInfo").hide();
});
$("#profile_higher_ed").focus(function() {
    $("tr.collegeInfo").show();
});

Edit:
You can also try using

$("#profile_higher_ed").live('focus', function() {
    $("tr.collegeInfo").show();
});

or

$("#profile_higher_ed").focusin(function() {
    $("tr.collegeInfo").show();
});

As an alternative to focus you can do the same thing with .click(). But since you’re working with a form this won’t be of much help if the user tabs through it.

Edit 2:
As pointed out in the comments it is better to use $("selector").on('focus', callback); nowadays, since live() is deprecated in jQuery.