Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Show TD one at a time on focus
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload