display child div on focus using jquery

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/

Answer 2

The problem is that you are selecting all the element with the .help-inline class. Try to change the javascript to this:

$("input").focusin(function() {
   $(this).parent().siblings(".help-inline").fadeIn(400);
}).focusout(function () {
   $(this).parent().siblings(".help-inline").fadeOut(100);
});

here is the demo, built over your fiddle.

Answer 3

http://jsfiddle.net/cgYQR/12/

    $("input").focusin(function() {
       $(this).parents(".has-help-inline").find(".help-inline").fadeIn(400);
    })

Find the parent of the current input "this" reference. Then find the child to fade in.