Question

I’m trying to show a div when a user clicks in an input field, however, am having a couple of issues…

1) When the user clicks the input field, the div does show, however, any interaction with the div results in the div disappearing… how do I keep the field active while the user is interacting with the div?

2) I have more than one field, and using the code below… how do I set it to multiple field id’s and show a div associated to each specific div (i.e. input field id=age shows div id=tip-age, input field id=height — shows div id=tip-height)

I’ve crated a jsfiddle for this also http://jsfiddle.net/NEmYv/

HTML CODE

<form id="measure">
<div id="tip-age" style="display:none;">text here</div>
<input type="text" id="age" />
<input type="submit">
</form>

jQuery

$("#age").focusin(function() {
    $("#tip-age").show();
}).focusout(function () {
    $("#tip-age").hide();
});

I do understand that this might be answered in the jQuery API… but I could really use your help on this matter. My apologies in advance if this is a menial question…

Answer 1

i created a demo to meet your requirements. you can view the demo here:

the fiddle code
here’s what i did:

$(".show-hidden-div").click(function() {
var inputId = $(this).attr('id');
$("#tip-"+inputId+"").show();});

as you can see, i created two inputs, each with a related hidden div. i added a class “show-hidden-input” so you can treat all related inputs with the click event using jquery. once the input with the “show-hidden-input” class is clicked, i get the unique id and use it to find it’s related hidden div. i then show the related div.