Dynamic Height of Text area
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.msg {
width:300px;
margin:100px;
}
.msg_caption {
width:100%;
overflow:hidden;
margin-bottom:1px;
}
.msg_caption span {
display:block;
float:left;
margin:0 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
color:white;
}
.msg textarea{
width:300px;
border:1px solid #000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
let $comment=$("#comment");
$('.bigger').click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
$comment.animate({height:"+=50"},400);
}
}
});
$(".smaller").click(function () {
if(!$comment.is(":animated")){
if($comment.height()>50){
$comment.animate({height:"-=50"},400);
}
}
});
});
</script>
</head>
<body>
<form method="post" action="#">
<div class="msg">
<div class="msg_caption">
<span class="bigger">Large</span>
<span class="smaller">Small</span>
</div>
<div>
<textarea id="comment" cols="20" rows="8">Multi-line text box height changes. Multi-line text box height changes. Multi-line text box height changes. Multi-line text box height changes. Multi-line text box height changes. Multi-line text box height changes.
</textarea>
</div>
</div>
</form>
</body>
</html> Most Helpful This Week
Using jQuery delete table row on click
Example to take user input and display on screen using JavaScript
How to set checkbox and radio option checked on load with jQuery?
jQuery simple form with name and email validations
How to check if an element or HTML tag exists using JavaScript?
Image Rollover Using onMouseOver and onMouseOut