javascript - how do i automatically adjust the height of a tab to fit content -

i tab adjust height of content within when calender pops within tab. here code. thanks!

  <script>   $(function(){   $( "#accordion-1" ).accordion({collapsible: true,   heightstyle: "content"});      $("#enable").click(function(){   $("#accordion-1").accordion("option", "disabled", false);   $("#accordion-1").accordion("option", "active", 2);   });    $("#disable").click(function(){   $("#accordion-1").accordion("option", "disabled", true);   });   });    $(function() {   $( "#datepicker-1" ).datepicker();   });   $(function() {   $( "#datepicker-2" ).datepicker();    });     </script>      <div id="accordion-1" >    <h3>tab 1</h3>     <div>      departure city: <input id="dep"></input>      arrival city: <input id="arr"></input>     </div>     <h3>tab 2</h3>     <div id="select_date" >          onward departure date: <input id="datepicker-1"></input>     return departure date: <input id="datepicker-2"></input>     </div>     <h3>tab 3</h3>     <div>         traveler 1: <input id="name1"></input>     traveler 2: <input id="name2"></input>     </div>    </div> 

when input section within accordion style tab clicked, date picker pops select date. tab adjust content height accommodate date picker. ideas on how done? in advance

not sure have if don't specify height css property, size needs fit content

heres working fiddle. comment says (adam), if content out of flow not work.

update

from you've provided, can see problem is. think date picker has position:absolute means doesn't care div it's inside of, display on top without expanding parent.

what suggest on focusin , focusout events of inputs, manually expand tab height, force give specific height tab.

heres fiddle first option

another alternative create div same size date picker inside of tab display:none , on focus in/out of input can show/hide div. div empty (so nothing show when 'show' it) give impression tab "expanding".

heres fiddle second option

also, suggest using focusin/focusout because believe date picker appears/disappears on events

update 2

third demo

there third way well. inspected date picker , has unique id. since date picker appears on focusin event of input, , disappears on focusout, there should theoretically 1 date picker @ time (so unique id maintained).

what can date picker id , save variable. remove date picker appeared initially, , append div have wraps 2 date inputs. finally, can set position static automatically adjust height of div.

var datepicker = $('#ui-datepicker-div'); $('#ui-datepicker-div').remove(); $('#select_date').append(datepicker); $('#ui-datepicker-div').css('position', 'static');