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
Post a Comment