Есть форма, а в ней выбор услуг(select) и при выборе одной из услуг появляется div с ещё одним select. Так вот сама суть вопроса, как сделать так, чтоб этот div появлялся не резко, а как бы плавно расширялся сам и соответственно расширял всю форму вниз?
function Selected(a) {
var label = a.value;
if (label == 3) {
document.getElementById("docsl").style.display = 'block';
document.getElementById("docsu").style.display = 'none';
} else if (label == 1) {
document.getElementById("docsl").style.display = 'none';
document.getElementById("docsu").style.display = 'block';
} else {
document.getElementById("docsl").style.display = 'none';
document.getElementById("docsu").style.display = 'none';
}
}
<!--Основной select-->
<select name="service" onChange="Selected(this)">
<option value="0" selected ></option>
<option value="1" selected>Услуга 1</option>
<option value="2" selected>Услуга 2</option>
<option value="3" selected>Услуга 3</option>
<option value="4" selected>Услуга 4</option>
</select>
<!--Один из появляющихся div-->
<div name="docsl" id="docsl" style='display:none;'>
<div class="label">
Доп выбор
</div>
<div class="field-input">
<select name="docl" class="input">
<option value="0" selected></option>
<option value="1" selected>Доп выбор 1</option>
<option value="2" selected>Доп выбор 2</option>
</select>
</div>
</div>