Hide children first and then reduce width of parent

Question

I have the layout as follows:

<div id="outerwrap">
          <div id="innerwrap">      
             <div id="centerc">...</div>          

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

          <div id="leftc">..</div>
        </div>
       <div id="footer"">...</div>

    #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;
    }

The div leftc has children elements including images inside it.

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.

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

Answer 1

Something like this:

$(document).ready(function() {
  $("#leftc").css("width", "20px").children().css("display", "none");

  $("#leftc").hover(function() {
    $(this).stop();
    $(this).animate({ width: "197px" }).children().css("display", "block/inline");
  }, function() {
    $(this).stop();
    $(this).animate({ width: "20px" }).children().css("display", "none");
  });
  ...
});

edit: my bad, I mis-read your question, just select all children and hide them (:

2nd edit: see code above for hover-fix. You can use the stop() function to stop all animations on that element, so that you'll start off fresh every time. If you want to do it with a click event, you can simply set a flag like so:

var leftActive = false;
$("#leftc").click(function() {
  if (leftActive) {
    $(this).animate({ width: "20px" }).children().css("display", "none");
    leftActive = false;
  } else {
    $(this).animate({ width: "197px" }).children().css("display", "block/inline");
    leftActive = true;
  }
});