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](https://stackoverflow.com/questions/6635437/on-form-input-focus-show-div). 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>`?