Bootstrap 3 - Textarea Transition - JS

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
    <div class="stretching-textarea-panel">  
        
        <fieldset class="text-area-container no-bg">
            <legend>Hinweise PFM</legend>
            <div class="form-group">
                <div class="col-xs-12">
                    <textarea th:readonly="${showReadonly}" class="form-control maxe disabled" rows="2" th:id="'hinweisePfm_'+${losPrices.idLos}" name="hinweisePfm" th:text="${losPrices.notitzpreis}"></textarea>
                </div>
            </div>
        </fieldset>
        <fieldset class="text-area-container no-bg">
            <legend>Textbausteine PFM</legend>
            <div class="form-group">
                <div class="col-xs-12">
                    <textarea th:readonly="${showReadonly}" class="form-control maxe" rows="2" th:id="'textbausteinePfm_'+${losPrices.idLos}" name="textbausteinePfm" th:text="${losPrices.notitzgrund}"></textarea>
                </div>
            </div>
        </fieldset>
        <fieldset class="text-area-container no-bg">
            <legend>Anmerkungen AMIE Type:</legend>
            <div class="form-group">
                <div class="col-xs-12">
                    <textarea th:readonly="${showReadonly or losPrices.amietyp!='Other'}" class="form-control maxe" rows="3" th:id="'amietypAnmerkPfm_'+${losPrices.idLos}" name="amietypAnmerkPfm" th:text="${losPrices.amietypAnmerkPfm}"></textarea>
                </div>
            </div>
        </fieldset>
        <fieldset class="text-area-container no-bg">
            <legend>Anmerkungen Pricing intern</legend>
            <div class="form-group">
                <div class="col-xs-12">
                    <textarea class="form-control maxe" rows="3" th:id="'anmerkungenPricingIntern_'+${losPrices.idLos}" name="anmerkungenPricingIntern"...

CSS

.stretching-textarea-panel textarea {
  margin-bottom: 15px;
  line-height: 1em;
  box-sizing: content-box;
/*  height: 3em; */
  height: 2em;
  transition: height 0.3s ease; }
/*
.stretching-textarea-panel.text-area-selected textarea {
  height: 2em; }
  .stretching-textarea-panel.text-area-selected textarea:focus {
    height: 6em; }
*/
.stretching-textarea-panel textarea:focus {
    height: 6em; }


/* SCSS

.stretching-textarea-panel {
    textarea {
        margin-bottom:15px;
        line-height:1em;
        box-sizing: content-box;
        height:3em;
        transition: height 0.3s ease;
    }

    &.text-area-selected {
        textarea {
            height:2em;
            &:focus {
                height:6em;
            }
        }
    }
}

*/