CODEWITHSUNDEEP
jquery
golaz
golaz

Reputation: 71

Show div only when click on input

How to display a div only when I press the input or textarea?

Also, CSS is written correctly? .. or has some errors?

Demo code: http://jsfiddle.net/2wNbR/54/

Thanks for answer!

Upvotes: 0

Views: 59

Answers (3)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

$(document).ready(function () {
    $(".info_form").hide();
    $("input").on("focus", function () {
        $(".info_form").hide();
        $(this).next('div.info_form').show();
    });
});

See here http://jsfiddle.net/2wNbR/58/

--------- EDITED ----------------

$(document).ready(function () {
    $(".info_form").hide();
    $("input").on("focus", function () {
        $(".info_form").hide();
        $(this).next('div.info_form').show();
    });

     $(document).click(function(e) {
        if (!$(e.target).is('input')) {
            $(".info_form").hide();
        }
    });
});

http://jsfiddle.net/2wNbR/62/

Just add float:left; in your .info_form class in css. it will stay inline.

Upvotes: 0

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

Modified .info_form class and the JS code. Here is the result url
http://jsfiddle.net/2wNbR/60/

Hope this solves your problem.

Upvotes: 0

ltalhouarne
ltalhouarne

Reputation: 4636

Have you tried hiding it on ready() and show it on click?

$(document).ready(function () {
    $(".info_form").hide();
    $("input").on("focus", function () {
        $(".info_form").show();

    });
});

Upvotes: 1

Related Questions