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
JavaScript convert string variable in boolean using Regex
jQuery simple form validations between start date and end date
How to scroll page to 1000px from top on page load using jQuery?
How to define Global Variable in JavaScript?
jQuery show input text inside div after on click event
How to change text color on click using JavaScript?