title: How to expand a Div smoothly?
body: <p>I have a div that expands depending on the result of the select, it is with the height set to "auto". I want to make this expansion soft, it is very hard.</p>
  
  <p>Script used to expand and collapse the div::</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function ShowHideDIV(NomeDIV, Valor) {
              Valor = document.getElementById("Lista").value;
              if (Valor == "Sim") {
                  document.getElementById(NomeDIV).style.display = "block";
              } else {
                  document.getElementById(NomeDIV).style.display = "none";
              }
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>Parent div (to which I want to put the effect):</p>
  
  <pre><code>&lt;div class="bgCotar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Select (responsible for the expansion of Parent div):</p>
  
  <pre><code>&lt;div class="campo" id="campo4"&gt;
     &lt;label&gt;Incluir Dependentes?&lt;/label&gt;&lt;br /&gt;
     &lt;select name="Lista" size="1" id="Lista"
     onChange="ShowHideDIV('CampoOculto','Sim');"&gt;
        &lt;option value="0"&gt;Selecione...&lt;/option&gt;
        &lt;option value="Sim"&gt;Sim&lt;/option&gt;
        &lt;option value="Nao"&gt;Não&lt;/option&gt;
     &lt;/select&gt;                                     
  &lt;/div&gt;
  </code></pre>
  
  <p>An example of what I'm wondering:
  <a href="http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html" rel="nofollow">http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html</a></p>
  
  <p>Sorry for my bad English, my language is Portuguese.</p>