Jquery on focus show div

Question

When I click on the input, it shows the div on both fields. I want the div to appear on the selected input only.

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

Validation is very repetitive and it is not important to be different. There many many javascript validation libraries already written, I would suggest you pick one and learn how to use it good. This way you can easilly add validation to every page you develop, instead of wasting time writing validation scripts EVERY time you write one page. Check this out: https://www.codefellows.org/blog/the-ten-best-javascript-libraries-for-form-validation-and-formatting pick where you spend your time developing, dont rewrite code when you have so many already available to you. — M H, Jun 08 '15 at 21:57
Mate I am not trying to put validation. I just want to show/hide a div when the current input is selected (focused). — brunodd, Jun 08 '15 at 22:03
do you have access to the HTML source? I mean can you change that part too? There is an invalid `
` inside `
`. http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Mehdi, Jun 08 '15 at 22:10
Your HTML has a minor issue. Element 'div' cannot be nested with element 'p' — JGV, Jun 08 '15 at 22:10
If you have access to the HTML source, update it to match this and you're good to go: http://jsfiddle.net/b0ndt/zprjkhcv/ — Bondt, Jun 08 '15 at 22:13

score 2 · Answer 1 · answered Jun 08 '15 at 22:13

I would do something like this

As you can see I have added an ID to each div that you want to show that relates to the input you have clicked so you can have more flexibility of where the element is places in the DOM.

Also it hides all the divs that are not relevant to the current input.

I have also moved the div's outside the p tags to make the HTML valid, as suggested in the comments.

$('.example').focusin(function() {
    $('.tip').hide();
    $('#tip-'+$(this).attr('id')).show();
});
$('div.tip').hide();

Amit.rk3 · Answer 2 · 2015-06-08T22:17:24.490

Jquery .next() or .closest doesn't work between input and divs. So you may need a workaorund like below

Fiddle link

$('.example').focus(function () {
    $('div.tip').hide();
    var i = 0;

    $('.example').each(function () {
        if ($(this).is(":focus")) {
            $($('.tip')[i]).show();
        }
        i++;
    })

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

Mehdi · Accepted Answer · 2015-06-08T22:25:46.467

If we fix the nested <div> like this jsfiddle

<div>
    <label for="example">Text:</label>
    <input class="example" name="example" type="text" maxlength="100" />
    <div class="tip">
        Some text...
    </div>
</div>

This should work:

$('.example').on('blur', function() {
    $('div.tip').fadeOut('medium');
});
$('.example').on('focus', function() {
    $(this).siblings('div.tip').show();
});
$('div.tip').hide();

Jquery on focus show div

3 Answers3