CODEWITHSUNDEEP
jquery
brunodd
brunodd

Reputation: 2584

jQuery Show current div on input focus

I have 2 inputs on my form and I want to show its respective panel when the input is on focus.

I am using Bootstrap so my form is divided in 2 columns: Left column is the input and the right column is the panel that needs to be shown when the input is on focus.

Previously it was firing all panels on the page when one input was selected so I tried to use $(this).parent().next().('.js-panel-tip').show(); but it didn't work.

How can I target the respective panel of the selected input?

jsFiddle

JS:

$('.js-show-panel-tip').focus(function() {
    $(this).parent().next().('.js-panel-tip').show();

    $(document).bind('focusin.js-panel-tip click.js-panel-tip',function(e) {
        if ($(e.target).closest('.js-panel-tip, .js-show-panel-tip').length) return;
        $(document).unbind('.js-panel-tip');
        $('.js-panel-tip').fadeOut('medium');
    });
});
$('.js-panel-tip').hide();

HTML:

<div class="container">

  <form>

 <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control js-show-panel-tip" placeholder="Email">
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default bg-gray js-panel-tip">
        <div class="panel-body">
          <u>Email address</u>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! Eligendi dolorum neque fuga non eaque reiciendis facere praesentium.
        </div>
      </div>
    </div>
  </div><!-- row -->

   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default bg-gray js-panel-tip">
        <div class="panel-body">
          <u>Password</u>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! Eligendi dolorum neque fuga non eaque reiciendis facere praesentium.
        </div>
      </div>
    </div>
  </div><!-- row -->
  </form>
</div>

Upvotes: 1

Views: 150

Answers (4)

Amar Singh
Amar Singh

Reputation: 5622

Try $(this).parent().parent().next().find('.js-panel-tip').show();

JSfiddle

Upvotes: 1

Amol
Amol

Reputation: 428

Try This 

  $(this).parents(':eq(1)').next().find('.js-panel-tip').show();

Hope this will help you.

Upvotes: 0

rybo111
rybo111

Reputation: 12598

May I suggest an alternative approach? Use data attributes:

<input type="text" data-show-focus=".email-info">
<input type="text" data-show-focus=".password-info">
<div class="email-info hide">Some email info here</div>
<div class="password-info hide">Password info</div>

With this simple, resuable jQuery:

$('[data-show-focus]').on('focus', function(){
  var tgt = $(this).data('show-focus');
  $('.show-focus').addClass('hide');
  $(tgt).removeClass('hide');
});
$('[data-show-focus]').on('blur', function(){
  $('.show-focus').addClass('hide');
});

And create a .hide class if you haven't already:

.hide{
  display:none;
}

You can see it in action here: https://jsfiddle.net/m1dx1yn9/1/

Upvotes: 0

Emad Armoun
Emad Armoun

Reputation: 2087

you should go up 2 times, then use find() method

$(this).parent().parent().next().find('.js-panel-tip').show();

Upvotes: 0

Related Questions