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
How to scroll page to 1000px from top on page load using jQuery?
Example to take user input and display on screen using JavaScript
jQuery Show or Hide text on button click
How to current URL, HOST and URL attributes using JavaScript or jQuery?
How to check a variable is undefined in JavaScript?
Image Rollover Using onMouseOver and onMouseOut