How can I prevent the width changing when using jQuery's slideUp?

Question

I have a test-case here:

http://www.jsfiddle.net/kPBbb/

Once the content has .content, the .wrapper shrink-wraps itself, presumably because the .content is display: noneed. I would like the .wrapper to behave as if the .content were still there after the animation, maintaing the initial size.

The .wrapper has been float: lefted in order to show the issue (by forcing shrink-wrap behavior), but may not always be, so I'd like a solution that doesn't involve reading the width of the box before the animation, and reapplying it after.

Is there a simple fix?

Answer 1

If you specify the width of the wrapper, it will stay the same size if you slide toggle a child of it.

.wrapper{
    width: 200px;
}

I am not sure if there is a better/more generic solution to this problem.

Answer 2

Instead of using display:none you can use visibility:hidden and then visibility:visible to display the information.

display:none

This will act as if the data is not on the page and this is why the wrapper will shrink itself once the display property is changed to none

visibility:hidden

Visibility allows the data to still be stored in its place on the page but is merely invisible.

Try this out and see if this helps you with your question.

Answer 3

Or to make it dynamic try the following:

var contentWidth = $('.content').width();

$('.header').width(contentWidth);

Answer 4

I would personally do this:

$('.wrapper').each(function() {
  var wrapper = this;
  $('.header', wrapper).click(function() {
    $(this).css('width',$(this).width());
    $('.content', wrapper).slideToggle();
  });
});​

But maybe you can even do this:

$('.wrapper').each(function() {
    var wrapper = this;
    $('.header', wrapper).click(function() {
        $('.content', wrapper).slideToggle('slow',function(){
            $('.content', wrapper).show();
            $('.content', wrapper).css('visibility','hidden');
            $('.content', wrapper).css('height','0px');
        });
    });
});

​