Slide toggle doesn't apply when element is initially hidden?
<p>Consider the following html snippet</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/foo.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="apdu layer"&gt;
  &lt;div class="apdu layer entry"&gt;APDU&lt;/div&gt;

    &lt;div class="hci layer"&gt;
    &lt;div class="hci layer entry"&gt;HCI&lt;/div&gt;

        &lt;div class="raw layer"&gt;
          &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;            
          &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;            
          &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;            
    &lt;/div&gt;

    &lt;/div&gt;

  &lt;div class="hci layer"&gt;
    &lt;div class="hci layer entry"&gt;HCI&lt;/div&gt;

    &lt;div class="raw layer"&gt;
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
    &lt;/div&gt;

  &lt;/div&gt;

    &lt;div class="hci layer"&gt;
    &lt;div class="hci layer entry"&gt;HCI&lt;/div&gt;
    &lt;div class="raw layer"&gt;
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
      &lt;div class="raw layer entry"&gt;RAW&lt;/div&gt;        
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>
  </p>

<p>with the following javascript</p>

<pre><code>$(function()
{   
$('.apdu.layer.entry').click( function() {
    $(this).parent().children('.hci.layer').slideToggle();
});

$('.hci.layer.entry').click( function() {
    $(this).parent().children('.raw.layer').slideToggle();
});

});
</code></pre>

<p>works all great and expected.</p>

<p>However, when I add the following two lines to initially hide the two div(s) </p>

<pre><code>$('.hci.layer').hide();
$('.raw.layer').hide();
</code></pre>

<p>there is a 'rough animation' that looks like the sliding takes place, but the contents remain hidden.</p>

<p>From the <a href="http://api.jquery.com/slideToggle/" rel="nofollow">doc</a> of slideToggle()</p>

<blockquote>
  <p>If the element is initially displayed, it will be hidden; if hidden, it will be shown.</p>
</blockquote>
