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 not 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");