Breaking News

How to make an Expandable Text area:

Share on Google Plus

How to make an Expandable Text area in HTML:

Hello Friends,
Today I am going to share a trick about a text area that has flexibility to suit any size. This text area will be fixed initially, when text is filled the text height expands to a certain defined height the if further text is inserted then a scroll appears which helps in inclusion of more info. I am glad to share this with you so let start.
Put this code in body part in your html document.
<div class="container">
<div class="row">
<div class="col-lg-12 InnerPart">
<div class="form-group">
  <div class="col-md-12">                    
    <textarea class="form-control animated" id="textarea" name="textarea"></textarea>
<script src=''></script>
<script src='js/jquery.autosize.js'></script>
First View:
This is the first view of text area. If user have few words to write then the text area will not expand or have any scroll. Like as first picture:-
Second View:
This is the second view of text area where text area takes its maximum height. Refer this picture:-
Third View:
This is the last view of text area. Here it has expanded at its maximum height, after it a scroll will appear to cater the increase in number of text. This can be seen in the following picture:-
View live Demo at:-
For any further query please get in touch at

You Might Also Like


Our Logo

Our Logo
Tech Hunters

Like us on Facebook