jQuery Show TD one at a time on focus
<p>I have a registration form for my websites and I am trying to show different hidden td's as tips to my users when they focus on the inputs...</p>

<p>I've tried the closest(), next(), sibling(), hasClass() and cannot get this thing to work...any help is appreciated.  Here is the jsfiddle <a href="http://jsfiddle.net/88JPU/1/" rel="nofollow">http://jsfiddle.net/88JPU/1/</a></p>

<pre><code>&lt;style type="text/css" rel="stylesheet"&gt;
.focusField{  
    border:solid 2px #333;  
    background:lightyellow;   
}  
.idleField{  
     background:#fff;  
     border: solid 1px #DFDFDF;  
}  
input.text_field {
    -moz-border-radius: 5px 5px 5px 5px;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    margin: 0;
    padding: 8px;
    width: 200px;
}
input.text_field.with_box {
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-topright: 0;
}
.col-help {
    background:#f7f7f7;
    border:1px solid #ccc;
    font-size:13px;
    font-family:Tahoma, Geneva, sans-serif
}
&lt;/style&gt;

&lt;script&gt;
$(function() {
    $('.col-help').hide();

    $('input[type="text"]').focus(function () {
        $(this).removeClass("idleField").addClass("focusField");
        $(this).closest('td').hasClass('col-help').show();
    });
});
&lt;/script&gt;

&lt;table&gt;
&lt;tbody&gt;
&lt;tr&gt;
  &lt;td&gt;Full Name:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" class="text_field name" id="name"/&gt;&lt;/td&gt;
  &lt;td class="col-help name" width="200 &gt;what is your name&lt;/td&gt;
&lt;tr&gt;
  &lt;td&gt;Password:&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="text_field" id="password"/&gt;&lt;/td&gt;
  &lt;td class="col-help"&gt;Type a strong password...&lt;/td&gt;
&lt;/tr&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
