Textarea

                
                
                    
<div class="stg-input_textarea_wrapper">
    <textarea id="element_dynamic_textarea" name="kundeninfo" class="stg-input_element stg-input_textarea" style="height: 50px;">Dies ist ein Beispieltext, um zu zeigen, wie die Ausklappfunktion bei mehr Text ausschaut.</textarea>
    <span class="stg-input_text_slidedown stg-cp" data-collapsedheight="50" onclick="toggleTextArea(this)">
        <img id="element_toogle_icon" src="./images/icon_arrow_down_circle_grey.png" alt="Icon Mehr Text">
    </span>
</div>

                
                
                    

.stg-input_textarea_wrapper {
  position: relative;
  width: 20%;
}

.stg-input_element {
  background-color: var(--slider-grau);
  color: var(--schwarz);
  border: none;
  border-radius: 10px;
  padding: 8px 15px;
  width: 100%;
  box-sizing: border-box;
}

.stg-input_textarea {
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  color: var(--grau_1);
  overflow: hidden;
}
.stg-input_text_slidedown {
  position: absolute; 
  bottom: -10px; 
  left: 50%; 
  transform: translateX(-50%);
  transition: transform 0.3s;
}

.stg-cp {
  cursor: pointer;
}

                
                
                    
function toggleTextArea(triggerElem) {
    var textareaId = triggerElem.dataset.textareaid;
    var imgId = triggerElem.dataset.imgid;

    var textarea = document.getElementById(textareaId);
    var icon = document.getElementById(imgId);
    var collapsedHeight = (triggerElem.dataset.collapsedheight || "50") + "px";
    const currentHeight = window.getComputedStyle(textarea).height;

    // Überprüfen, ob die Textarea leer ist oder Inhalt nicht die Höhe überschreitet
    if (textarea.value.trim() === '' || textarea.scrollHeight <= parseInt(collapsedHeight)) {
        // Falls leer oder Inhalt kleiner als Höhe, Icon drehen
        icon.classList.toggle('stg-element_textarea_icon_rotated');
        return;
    }

    // Wenn die Höhe der textarea gleich der Höhe von collapsedHeight ist
    if (currentHeight === collapsedHeight) {
        // Textarea erweitern
        textarea.style.height = textarea.scrollHeight + 'px';
        icon.classList.add('stg-element_textarea_icon_rotated');
    } else {
        // Textarea wieder zusammenschieben
        textarea.style.height = '50px';
        icon.classList.remove('stg-element_textarea_icon_rotated');
    }
}

#textfeld #texteingabe #input text #textfeld icon #textfeld toggle