jQuery selector problem
<p>I have problem with sliding up/down a class in my project and would appreciate any help.</p>

<p>HTML:</p>

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

<p>jQuery:</p>

<pre><code>$("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');
});
</code></pre>

<p>CSS: </p>

<pre><code>.regler {
 display: none;  
}

input.btn {
 display: none;  
}
</code></pre>

<p>The jQuery is located after the HTML in scripts tags.</p>

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

<p>Thanks for answers, Victor.</p>
