jQuery siblings and $(this) blur and focus

Question

I have a form with labels and input fields. When clicking into a field I want to style the field with CSS and display some information about the input requirements in a div under the label.

The focus() and blur() events add the classes for styling the field just fine but trying to show/ hide the info divs triggers the 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

EDIT:

Based on your updated code, you should be using .prev() instead of .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/

---

Original answer:

Your code works fine: http://jsfiddle.net/D9qnk/

My guess is that your are initially hiding the .label-info using visibility: hidden; instead of display:none;

If that's the case, switch your css to use display:none instead.

.label-info {
    display: none;
}​

Or if you want to use the visibility property, then change its value using .css():

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

...

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

Answer 2

Ok, now I see the problem. Your HTML markup is wrong. You cannot have a div element inside label, use span instead:

<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 an 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> 

---

Otherwise the browser will correct the markup producing this:

<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="">

So every label-info and input element will be on the same level and therefore siblings to each other.