Question

I’m completely new in javascript. The problem is, I have multiple textarea and div which ‘echo’-ed out via PHP with ID (for example textarea_1,textarea_2…), and I wanna do something like, when the textarea is on focus, only that particular textarea which being focussed will slide down and expand.

Html

<textarea id="comment_textarea_1"></textarea>
<div id="button_block_1"><button type="submit">Submit</button><button type="submit" id="cancel_1">Cancel</button></div>

<textarea id="comment_textarea_2"></textarea>
<div id="button_block_2"><button type="submit">Submit</button><button type="submit" id="cancel_2">Cancel</button></div>

Javascript

$(document).ready(function () {
    var $this = $(this);
    var $textareaID = $this.attr("id").replace("comment_textarea_");
    var $buttonblockID = $this.attr("id").replace("button_block_");
    var $cancelID = $this.attr("id").replace("cancel_");

    var $textarea = $('#'+$(textareaID));
    var $button = $('#'+$(buttonblockID));
    var $cancel = $('#'+$(cancelID));

$textarea.focus(function(){

    $textarea.animate({"height": "85px",}, "fast" );
    $button.slideDown("fast");
    return false;
});

    $cancel.click(function(){
    $textarea.animate({"height": "18px",}, "fast" );
    $button.slideUp("fast");
    return false;
});
});

Thank you!

Answer 1

I explained it in the code. Try this.

$(document).ready(function () {
   // select all the textareas which have an id starting with 'comment_textarea'
   var $textareas = $("textarea[id^='comment_textarea']");
   $textareas.on("focus",function(){
      // now $(this) has the focused element
      $(this).animate({"height": "85px",}, "fast" );
      // find the button block of this div and animate it
      $("div[id^='button_block']",$(this)).slideDown("fast");
   });

   $textareas.on("focusout",function(){
      // now $(this) has the focused out element
      $(this).animate({"height": "18px",}, "fast" );
      // find the button block of this div and animate it
      $("div[id^='button_block']",$(this)).slideUp("fast");
   });
});