Hide children first and then reduce width of parent
<p>I have the layout as follows:</p>

<pre><code>&lt;div id="outerwrap"&gt;
          &lt;div id="innerwrap"&gt;      
             &lt;div id="centerc"&gt;...&lt;/div&gt;          

             &lt;div id="rightc" style="font-weight:bold"&gt;
          &lt;/div&gt;
          &lt;div style="background-color:White;height:10px;top:284px;left:0px"&gt;&lt;/div&gt;

          &lt;div id="leftc"&gt;..&lt;/div&gt;
        &lt;/div&gt;
       &lt;div id="footer""&gt;...&lt;/div&gt;

    #outerwrap
    {
       background-color: #EE44E7;
    }

    #innerwrap
    {
       background-color: #EE44E7;
       margin-right: 200px;
       top:0px;
       height:100%;
    }


    #leftc
    {
       position: absolute;
       top: 111px;
       left: 0px;
       width: 197px;
       background-color: #EE44E7;
       font-size: 10px;
    }

    #centerc
    {
       position: relative;
       margin-left: 199px;
       padding: 0px;
       background-color: white;
    }

    #rightc
    {
       position: absolute;
       top:111px;
       right: 0px;         
       width: 199px;
       color: blue;
       background-color: #EE44E7;
       font-size: 10px;
    }


#footer
    {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 62px;
visibility: hidden;
    }
</code></pre>

<p>The div leftc has children elements including images inside it. </p>

<p>What I want to do is that when the page loads, the children of leftc should be hidden and the leftc should have  width=20px. When the user hovers the mouse 'on' leftc, the leftc should become 197px wide with smooth animation and children should now be visible. When user hovers 'out' the mouse, the children should be hidden and leftc width should be 20px only with animation.</p>

<p>How can I do this in jQuery that works on all browsers including IE8. Thank you.</p>
