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
Example to take user input and display on screen using JavaScript
How to check if an element or HTML tag exists using JavaScript?
JavaScript check if first string contains all characters of second string
How to current URL, HOST and URL attributes using JavaScript or jQuery?
How to set checkbox and radio option checked on load with jQuery?
How to declare multiple variables in one statement in Javascript?