Collapsing a <div> when contents are hidden

[questionable]

Hello,

I have the following scenario:
+-----------------------------------------+
|``````````````Main Div````````````````|
|+-------------------+-------------------+|
||````little div 1```` |````little div 2`````||
||`````````````````| ```````````````` ||
||`````````````````| ```````````````` ||
|+-------------------+-------------------+|
+------------------------------------------+

I have this script call in my jQuery:

$("#littlediv1").click($("#littlediv2").toggle())

Which automatically will either hide or unhide "little div 2" when "little div 1" is clicked.

Which turns my screen into this:
+-----------------------------------------+
|``````````````Main Div````````````````|
|+-------------------+``````````````````|
||````little div 1```` |``````````````````|
||`````````````````| ```````````````` `|
||`````````````````| ```````````````` `|
|+-------------------+``````````````````|
+------------------------------------------+

I do not know the size of "little div 1" because of variable data. But is there a way to make "Main Div" automatically collapse when this data is hidden so that it would look like this?
+---------------------+
|``````Main Div``````|
|+-------------------+|
||````little div 1```` ||
||`````````````````||
||`````````````````||
|+-------------------+|
+---------------------+
Also it would re-expand when "little div 1" is clicked again.

Is there a jQuery collapse div or a css collapse attribute I can use for this?

[Fumigator]

You say "collapse", but you really mean resize the width, since collapsing is a vertical thing. You can change the width of the div with the .css() function.

http://docs.jquery.com/CSS/css#namevalue

[questionable]

.css() worked great I just need to determine .attr("width") to determine the width and then use .css("width") to change the width of the other one.