<div class="row row--padded row--no-top row--no-bottom row--wide"> <div class="column column--10"> <a class="label link--primary" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a> </div> </div> <div id="publish-details" hidden="true" class="row row--padded row--wide"> <!-- description input --> <div class="row row--no-top"> <div class="column column--3 column--med-10 align-content-top"> <label for="publish-license" class="label">Description:</label> </div><div class="column column--7 column--sml-10"> <textarea rows="1" id="publish-description" class="textarea textarea--primary textarea--full-width" placeholder="Optional description"></textarea> </div> </div> <div class="row row--no-top"> <div class="column column--3 column--med-10"> <label for="publish-license" class="label">License:</label> </div><div class="column column--7 column--sml-10"> <select type="text" id="publish-license" class="select select--primary"> <option value=" ">Unspecified</option> <option value="Public Domain">Public Domain</option> <option value="Creative Commons">Creative Commons</option> </select> </div> </div> <div class="row row--no-top"> <div class="column column--3"> <label for="publish-nsfw" class="label">Mature:</label> </div><div class="column column--7"> <input class="input-checkbox" type="checkbox" id="publish-nsfw"> </div> </div> </div> <script type="text/javascript"> const textarea = document.getElementById('publish-description'); const limit = 200; textarea.oninput = () => { textarea.style.height = ''; textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px'; } </script>