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 get selected text from a select box using jQuery?
How to the length of the longest word in the provided sentence?
How to join string with number in JavaScript?
Generate random password for form field on click using JavaScript
What's the difference between let and var?
jQuery show input text inside div after on click event