Collapse a DIV hiding its content even if defined in percentage

Question

I'm trying to obtain a DIV that could collapse on click. For this simple example, click is triggered directly on the entire DIV.

<div id='fixed'>
    <input type='text'>
</div>

#fixed { width: 200px; } 
#fixed input { width: 180px; }
.short_fixed { width: 50px !important; }

$('#fixed').click(function(){
    $(this).toggleClass('short_fixed');
});

My example shows 2 cases: first one use "fixed" width object, while the second one use "percentage" width.

When clicked, first DIV truncates without resizing its content, resulting in hiding overflow content, but it requires to have px based width that is not so desirable

Instead, second one adapt content according to container's width, it lets me to use %, but does not hyde content on collapse as I would like.

So, I would like to set content width in % of container's width (that could have % width too) like in second example, BUT with behaviour of first one in case of container's collapsing.

Answer 1

add

#variable input { width:100%; min-width: 180px;}

to your css, so it will keep percentage but content will hide on collapse

See demo here

Answer 2

toggling bettween display: block and display: none with the toggle function seems to be yout best bet