Question

I have the following html markup for my forms:

<div class="row has-help">
  <div class="col">Label</div>
  <div class="col"><input /></div>
  <div class="col"><span class="helper">Foobar</span></div>
</div>

The above code is repeated several times for different form elements. When the input is focussed on i wish to fadeIn the span in the third col.

I have written the code to accomplish this however when i focus on any input on the page all the span helpers appear rather than jus the child span.helper of .has-help.

I have the code on this JSFiddle.

Any help would be greatly appreciated with this.

Answer 1

You need to select the one inside the closest div.has-inline-help

$("input").focusin(function() {
           $(".help-inline", $(this).closest('.has-help-inline')).fadeIn(400);
        }).focusout(function () {
            $(".help-inline", $(this).closest('.has-help-inline')).fadeOut(100);
        });

http://jsfiddle.net/tarabyte/cgYQR/6/