jQuery selector problem

Question

I have problem with sliding up/down a class in my project and would appreciate any help.

HTML:

<input type="text" class="text" name="left" style="width:100%;"/>
<input type="submit" class="btn" value="Submit" />
<div class="regler">Regler</div>

jQuery:

$("input.text").focus(function () {
     $(this).animate({width:'80%'},'slow',function(){
         $(this).next('input.btn').fadeIn('Slow');
     });
     $(this).next(".regler").slideDown('Slow');
});
$("input.text").blur(function () {
     $(this).next('input.btn').fadeOut('Slow',function(){
         $(this).prev().animate({width:'100%'},'slow');
     });
     $(this).next(".regler").slideUp('Slow');
});

CSS:

.regler {
 display: none;  
}

input.btn {
 display: none;  
}

The jQuery is located after the HTML in scripts tags.

$(this).next(".regler").slideDown('Slow'); and $(this).next(".regler").slideUp('Slow'); is the only rows that doesn't work.

Thanks for answers, Victor.

Answer 1

next is only looking for the immediate next element. Since this is the textbox in your context, it has no next .regler. If these tags are wraped in a parent container, try this:

$(this).siblings(".regler").slideUp('Slow');

Or, if you have many sets if inputs:

$(this).next().next(".regler").slideUp('Slow');