javascript - Animating an expanding textarea with jQuery -


objective

i want animate of textareas in various forms. can animate 1 because using id selector.

javascript

$(function() {     $("#content").focus(function(){         $(this).animate({"height": "85px",}, "fast" );         $("#button_block").slidedown("fast");         return false;     });      $("#cancel").click(function(){         $("#content").animate({"height": "30px",}, "fast" );         $("#button_block").slideup("fast");         return false;     }); }); 

html

<form method="post" action="">     <textarea  id="content"></textarea>     <div id="button_block">         <input type="submit" id="button" value=" share "/>         <input type="submit" id='cancel' value=" cancel" />     </div> </form> 

try this.use class , select closest textarea animate. sample demo

$(function() {      $(".content").focus(function() {      $(this).animate({        "height": "85px",      }, "fast");      $(this).closest('form').find(".button_block").slidedown("fast");      return false;    });      $(".cancel").click(function(event) {      $(this).closest('form').find('.content').animate({        "height": "30px",      }, "fast");      $(this).closest('form').find(".button_block").slideup("fast");      return false;    });    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form method="post" action="">    <textarea class="content"></textarea>    <div class="button_block">      <input type="submit" class="button" value=" share " />      <input type="submit" class='cancel' value=" cancel" />    </div>  </form>  <form method="post" action="">    <textarea class="content"></textarea>    <div class="button_block">      <input type="submit" class="button" value=" share " />      <input type="submit" class='cancel' value=" cancel" />    </div>  </form>  <form method="post" action="">    <textarea class="content"></textarea>    <div class="button_block">      <input type="submit" class="button" value=" share " />      <input type="submit" class='cancel' value=" cancel" />    </div>  </form>


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -