How to find a proper div related to another one when focusing on a div in jquery?

I am trying to do the following :

<div class="messageNewComment">
<form style="margin:0px;" action="cible.php" method="post">

<textarea class="content"></textarea>
<div class="button_block">
<input type="submit" class="button" value=" Partager "/>
<input type="submit" class="cancel" value=" Annuler " />
</div>

</form>
</div>

The textarea grows when you focus on it and the button_block shows up using jquery. It works fine when I have only one section like this above but as I am going to have multiples comment area i would like the proper button_block to show up ... How can I achieve that ?

here is my jquery code :

$(function() 
{
$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(".button_block").slideDown("fast");
}
return false;
});

$(".cancel").click(function()
{
/*if ($(".content").height() != 50) {*/
$(".content").height("20px"); //animate({"height": "20px",}, "fast" );
$(".button_block").slideUp("fast");
return false;
//}
});

As of now, every button_block of the page show up ... so that it is n开发者_Python百科ot very convenient ;)

Any idea ?

Thks a lot !

Gotye!

Try to replace

$(".button_block").slideDown("fast");

With

$(this).next(".button_block").slideDown("fast");

Your selector will select all elements with class button_block, but what we need the button block that follows the text area with focus. So we can use the jquery next selector.

The same logic should be used to slideup the buttons as well.

$(this).parent(".button_block").slideUp("fast").prev(".content").height("20px");

Here we can use parent and prev selectors

Because the div is a sibling .next should do the trick:

$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(this).next(".button_block").slideDown("fast");
}
return false;
});

traverse the tree with next()

$(".content").focus(function(){
    $(this).height(50).val('').next(".button_block").show();
  return false;
});

keegan3d's answer is right as long as ur div is just after the textarea. if any other element happens to come in between them in the future , u could use this:

$(function() 
{
$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(this).nextAll(".button_block:first").slideDown("fast");
return false;
});