How can I change my CSS so my widgets don't overlap each other when trying to "minimize" them?

Question

I asked a question awhile back about how to properly do my css/html so I could make a rounded widget based on an image I had. The question was answered here and the solution works great.

The widgets look just like I want them to:

Their basic structure is:

 <div id="widget3" class="widget">
        <div class="widget-top">
            <div class="widget-header">
                <div class="widget-nw"></div>
                <div class="widget-n">
                    <div class="widget-header-title">Demo Widget 3</div>
                    <div class="widget-header-link"><a href="#">Edit</a></div>
                    <div class="widget-header-controls">
                        <span class="widget-header-control"><img src="images/icon-refresh.png" class="widget-refresh" alt="refresh" /></span>
                        <span class="widget-header-control"><img src="images/icon-minimize.png" class="widget-minimize" alt="minimize" /></span>
                        <span class="widget-header-control"><img src="images/icon-close.png" class="widget-close" alt="close" /></span>
                    </div>
                </div>
                <div class="widget-ne"></div>
            </div>
        </div>
        <div class="widget-bottom">
            <div class="widget-body">
                <div class="widget-w"></div>
                <div class="widget-e"></div>
                <div class="widget-content">
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3
                </div>
            </div>
            <div class="widget-footer">
                <div class="widget-sw"></div>
                <div class="widget-s">
                    <div class="widget-footer-controls">
                        <span class="widget-footer-control">
                        </span>
                    </div>
                </div>
                <div class="widget-se"></div>
            </div>
        </div>
    </div>

Css:

.widget-nw
{
    background-image: url('images/widget-top-left.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-ne
{
    background-image: url('images/widget-top-right.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}
.widget-sw
{
    background-image: url('images/widget-bottom-left.png');
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-se
{
    background-image: url('images/widget-bottom-right.png');
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-w
{
    background-image: url('images/widget-middle-left.png');
    background-repeat: repeat-y;
    position: absolute;
    left: 0;
    height: 100%;
    width: 6px;
    z-index: 1;
}

.widget-e
{
    background-image: url('images/widget-middle-right.png');
    background-repeat: repeat-y;
    position: absolute;
    right: 0;
    height: 100%;
    width: 6px;
    z-index: 1;
}
.widget-n
{
    background-image: url('images/widget-top-middle.png');
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    height: 28px;
    width: 100%;
    z-index: 1;
}

.widget-s
{
    background-image: url('images/widget-bottom-middle.png');
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
    height: 28px;
    width: 100%;
    z-index: 1;
}

.widget
{
    position: relative;
}

.widget-header-title
{
    float: left;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Tahoma, Helvetica;
    margin: 8px 0px 0px 10px;
    color: #4c3166;
    cursor: move;
}

.widget-content
{
    padding: 28px 6px;
}

.widget-header-controls
{
    float: right;
    margin: 6px 10px 0px 0px;
}

.widget-header-control
{
 cursor: pointer;
    padding-right: 1px;
}

.widget-header-link
{
 margin: 6px 0px 0px 10px;
 float: left;
}

Now, however, I'm trying to make that "Up Arrow" icon in the top-right of the widget toggle a minimize/maximize using jQuery (so will only show the top-bar or conversely the whole thing). I'm attempting to animate it either using animate() or slideUp()/slideDown().

$(document).ready(function () {
    $('.widget-minimize').click(function () {
        toggleMinimize($(this).parents('.widget').attr('id'));
    });

});


 function toggleMinimize(widgetId) {
        if ($('#' + widgetId + ' .widget-bottom').is(':visible')) {
            $('#' + widgetId + ' .widget-bottom').slideUp();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-maximize.png').attr('alt', 'maximize');
        }
        else {
            $('#' + widgetId + ' .widget-bottom').slideDown();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-minimize.png').attr('alt', 'minimize');
        }
    }

This isn't working correctly when I try to minimize/maximize it. I have a feeling it has something to do with jQuery incorrectly calculating the height of my widget but I don't know of an easy way to really change the widget. I've also tried using the animate() method and altering the height but I ran into problems of not knowing what height to expand it back out to when it was time to "maximize" the widget. Also, they were still sliding on top of each other.

What can I do to make it so I can I properly minimize/maximize my widget without them sliding on-top of eachother (and still be animated)?

Try it out (Live Demo): Here

Answer 1

I made two changes [View Here].

(I had to temporarily change image locations for it to work on JS fiddle, just ignore the new urls.)

First: I made it animate the body's height (look at the JS I only changed the minimize/maximize function)

Second: I changed one line of css to add overflow: hidden; to the .widget-content so that when I made it's height 0 there wouldn't be any overflowing text.

The only problem with the way I did it is that when you minimize the box, it remembers the height it had so it can go back to it. Therefore if you do something to change the height of the content while it is closed, it will not open correctly (something will be cut off or there will be too much height). There are some things you can do about this, but first tell me if these changes helped you.