Alexis Alexis - 8 days ago 7
HTML Question

jQuery to show div from id attribute

I have two inputs

<div class="form-group">
<label>Store Username <span>*</span></label>
<input required type="text" name="storeusername" class="form-control info" id="1" />
</div>
<div class="form-group">
<label>Store Name<span>*</span></label>
<input required type="text" name="storename" class="form-control info" id="2" />
</div>


What I am doing is that I when I click on an input it should first hide all divs and then pick id of that input and show its respective div…

divs are these

<div id="div1" class="infoDiv hidden">
<div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span></h2></div>
<p>Store username is unique and it will be used to find your store.</p>
<p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p>
<p>Please keep in mind before choosing username.</p>
<p>
<ul>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li>
</ul>
</p>
</div>
<div id="div2" class="infoDiv hidden">
<div class="company-story-content"><h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div>
<p>Div</p>
</div>


jquery

$(document).ready(function() {
$(".info").click(function() {
var id = $(".info").attr('id');
$(".infoDiv").hide();
$("#div"+id).removeClass("hidden");
});
});


But this is not working! No div is shown. Can anyone help me out with a bit of explanation?

Answer

I see your intention is to bring up a div when user is about to enter values into the text box.

Since users can navigate into the text box with keyboard too I would recommend you to use focus event to trigger the logic of bringing up the div rather than click.

$(".info").on('focus',function() { $(".infoDiv").hide(); var id = $(this).attr('id'); $("#div"+id).show(); });