Tutorial :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>      


Solution:1

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.


Solution:2

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;  });  

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');  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »