JQuery siblings and $ (this) blur and focus

Question

I have a form with labels and input fields. When I click in a field, I want to create a field using CSS and display some information about input requirements in a div under the label.

The focus () and blur () events add classes to style the field just fine, but trying to show / hide information divs calls methods on all fields using $ (this) .siblings ()

$(".input-field").focus(function() { 
    $(this).addClass("input-field-focus");
    $(this).siblings(".label-info").show();
    return false; 
});
$(".input-field").blur(function() { 
    $(this).removeClass("input-field-focus");
    $(this).siblings(".label-info").hide();
    return false; 
});


<label for="login">
    User name:<br />
    <div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</div>
    <input type="text" name="login" class="input-field" value="<?php echo (isset($_POST['login'])) ? $_POST['login'] : ""; ?>">
</label>    

Answer 1

OK, now I see the problem. Your HTML markup is incorrect. You cannot have an element divinside label, use span:

<label for="login">User name:
    <br />
    <span class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</span>
    <br />
    <input type="text" name="login" class="input-field" value="">
</label>  

or wrap the whole block in your own div:

<div>
    <label for="login">User name:</label>
    <div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</siv>
    <input type="text" name="login" class="input-field" value="">
</div> 

---

, :

<label for="login">
    User name:<br />
</label> 
<div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</div>
<input type="text" name="login" class="input-field" value="">

, label-info , , .

Answer 2

EDIT:

.prev() .siblings().

$(".input-field").focus(function() {
    $(this).addClass("input-field-focus");
    $(this).prev(".label-info").show();
    return false;
});
$(".input-field").blur(function() {
    $(this).removeClass("input-field-focus");
    $(this).prev(".label-info").hide();
    return false;
});

• http://api.jquery.com/prev/
• http://api.jquery.com/siblings/

---

:

: http://jsfiddle.net/D9qnk/

, .label-info, visibility: hidden; display:none;

, css display:none.

.label-info {
    display: none;
}​

, visibility, .css():

$(this).siblings(".label-info").css('visibility','visible');

...

$(this).siblings(".label-info").css('visibility','hidden');