Плавно расти родительский div до высоты добавленного дочернего div - Javascript

Question

Я просмотрел весь этот сайт для объяснения того, чего я пытаюсь достичь, но еще нашел ответ, который соответствует моей ситуации.

У меня есть DIV, который является окном предупреждения для формы проверки

<div id="alert_box" class="alert alert-danger alert-dismissable" 
    style="margin-top:0px !important; margin-bottom:0px !important; 
    display:none;"> 
//Alert message goes in here 
</div> 

DIV установлен для отображения, если есть ошибка в форме. Высота этого div является автоматической. Он находится внутри родительского DIV с несколькими другими дивы

<div id="parent_div"> 
    <div id="alert_box" class="alert alert-danger alert-dismissable" 
      style="margin-top:0px !important; margin-bottom:0px !important; 
      display:none;"> 
      //Alert message goes in here 
    </div> 
    <div id="other_1"> 
    </div> 
    <div id="other_2"> 
    </div> 
    <div id="other_3"> 
    </div> 
</div> 

Когда DIV установлен для отображения Я хочу, чтобы вырастить родительский DIV гладко. В настоящее время он появляется в родительском div.

Вот пример моей текущей проверки пароля

function validatePassword(fld) { 
     var input_div = document.getElementById('createPassword_div'); 
     var alert_box = document.getElementById('alert_box'); 

     if (fld.value == "") { 
      input_div.className += ' has-error'; 
      alert_box.style.display = 'block'; 
      alert_box.innerHTML = "You didn't enter a password"; 
      return false; 
     } 

     return true; 
    } 

Как я могу сделать родительский DIV расти плавно, когда ребенок DIV установлен появляться?

Answer 1

$(document).ready(function(){ 
 
    setTimeout(function(){ 
 
     $("#error").html("Error Message").hide(); 
 
     $("#error").slideDown(); 
 
    }, 1000); 
 
})

.temp{ 
 
    height: 50px; 
 
} 
 

 
#error{ 
 
    height: auto; 
 
}

<div id=parentDiv> 
 
    <div id=error></div> 
 
    <div class=temp>ABCD EDFG</div> 
 
    <div class=temp>ABCD EDFG</div> 
 
    <div class=temp>ABCD EDFG</div> 
 
</div>