1

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.

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • could you toggle between **display: block** and **display: none**? – jbutler483 Jan 21 '15 at 13:43
  • There is CSS transition in order to animate collapsing, so is not possible to use them. Anyway, in general, collapsing could be to a particular min-width size and not to 0, effectively like in linked example – Luca Detomi Jan 21 '15 at 13:45

2 Answers2

0

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

pumpkinzzz
  • 2,907
  • 2
  • 18
  • 32
  • Sorry, is not my desired behaviour. I would like to set things exactly like in my second example. In this way, even if I change width of red container, contend width change accordingly. Special case happens when I click onto DIV to collapse it. In this case, behaviour should exatly like the first example, in which content will NOT adapt to its container anymore, but simply be hidden. – Luca Detomi Jan 21 '15 at 13:52
  • 1
    not sure to understand. maybe like this http://jsfiddle.net/9sht0ttm/2/ ? (i updated the second example, which is in percentage, as you want, but setting a minimum width in px so it will hide on collapsing. – pumpkinzzz Jan 21 '15 at 13:59
  • 1
    Ohhh yes.... very very near to solution.... If you convert tour comment in an answer, I'll accept it :-) – Luca Detomi Jan 21 '15 at 14:15
0

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

Jorge Assunção
  • 1
  • 1