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.

Answer 2

How about only using jQuery to add and remove a hide class and use CSS transitions for the properties you want to animate?

jQuery:

$('#whatever').click(function(ev) {
  var $el = $('#element' + boxId);
  $el.toggleClass('hide');
});

CSS:

#element {  /* or #element{{boxId}} or some class added to those elements */
  opacity: 1;
  overflow: hidden;
  width: 100px; height: 100px;

  transition: height 300ms, opacity 300ms;
}

#element.hide {
  opacity: 0;
  height: 0;
}

See demo

Answer 3

Not sure if it is what you want but you can look into jQuery hide/show functions

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

if you want slower/faster animation you can give hide parameter which represents animation speed(in miliseconds)

$('#element'+boxId).hide(1000);