jquery - Expanding an inline elemen to its auto width -

jquery - Expanding an inline elemen to its auto width -

i have situation have button, , object after it. object width 0. thought when button clicked, expands "exact width".

the text can of different lengths. know never take more 1 line, shouldnt worry wrapping.

i made little mockup (not working, of course), of situation im describing. please tell me how this?

mockup: http://codepen.io/dbugger/pen/hbylr

js code want adapt:

$(".handler").on("click", function(){ if($(this).hasclass("open")){ $(".elastic").animate({width:"0px"}); $(this).removeclass("open"); } else { // here cant animate auto $(".elastic").animate({width:"auto"}); // works, there no animation... $(".elastic").css({width:"auto"}); $(this).addclass("open"); } });

what can wrap text on element:

<div class="elastic"> <div>lorem ipsum dolor sit down amet, consectetur adipisicing elit. ut, laboriosam.</div> </div>

then css alter display property can width val.

.elastic div { white-space:nowrap; display:inline-block; }

and jquer take value var

else { var siz = $(this).next('.elastic').find('div').width(); $(".elastic").animate({width:siz}); $(this).addclass("open"); }

check demo codepen

jquery css