Jquery, slideup() but do not remove element

Question

I've got an app that looks like a Windows desktop. There are icons that open draggable windows (divs) which display the content.

When I close a window, this happens:

$('#element'+boxId).animate({height: 0, opacity: 0}, 'fast');

When I open a window, this happens

$('#element'+boxId).slideDown();

Problem is, once a window is closed, I cannot reopen it. If I want to see that window again I have to refresh the page and then open it.

Is there some way to do a cool fade out that does not completely remove the element?

I have also tried regular old slideUp() but that does the same thing.

This works fine, just not as cool looking.

document.getElementById('element'+boxId).style.display = "none";

Answer 1

The problem is that you are hiding it by affecting the height and opacity, and those aren't being reset by the slideDown. Here's one option:

http://jsfiddle.net/uggVb/

$('#hide').click(function (e) {
    e.preventDefault();
    var $div = $('#theDiv');
    $div.data('originalHeight', $div.css('height'));
    $('#theDiv').animate({
        height: 0,
        opacity: 0
    }, 'fast');
    //$('#theDiv').slideUp('fast');
});

$('#show').click(function (e) {
    e.preventDefault();
    $('#theDiv').animate({
        height: $('#theDiv').data('originalHeight'),
        opacity: 1
    }, 'fast');
    //$('#theDiv').slideDown('fast');
});

You could use the slide functions instead of the animate functions, either work.