javascript - .click doesn't work for changing tab container's height -

i using domtab on site . ( between 'tous les films' , 'affichage horaire' ) height not automatically set, why trying use jquery modify each time click them.

here html structure of tab

    <div id="domtab1" class="domtab">           <ul class="domtabs">             <li><a id="fl1a" href="#t1">tous les films</a></li>             <li><a id="fl1b" href="#t2">affichage horaire</a></li>           </ul>           <div class="flip1a" id="fli1a">             <h2><a name="t1" id="t1"></a></h2>                 <ol class="rounded-list">                                              <li><a href="#">spiderman</a></li>                                             <li><a href="#">pokemon</a></li>                                             <li><a href="#">x men</a></li>                                             <li><a href="#">blanche neige</a></li>               </ol>              <p><a href="#top">back menu</a></p>             </div>           <div id="fli1b" class="flip1b" >             <h2><a name="t2" id="t2"></a></h2>              <div class="heading2">                <hr class="gradient_one" />                 <p class="hours_gradient">12h10</p>               </div>                <ol class="rounded-list">                     <li><a href="#">spiderman</a></li>                      <li><a href="#">pokemon</a></li>                 </ol>               ...              <p><a href="#top">back menu</a></p>           </div>     </div> 

and here jquery code tried none worked:

              $('#fl1b').on("click", function (e) {                     var maxheight2 = document.getelementbyid("fli1b").scrollheight;                     $("#text_var").html(maxheight2);                     $("#flip-tabs").css({                         'height': maxheight2 + 'px'                     });                 });                  $("#fl1b").click(function () {                     var maxheight2 = document.getelementbyid("fli1b").scrollheight;                     $("#text_var").html(maxheight2);                     $("#flip-tabs").css({                         'height': maxheight2 + 'px'                     });                 });                  $('#fl1b').live('click', function () {                     var maxheight2 = document.getelementbyid("fli1b").scrollheight;                     $("#text_var").html(maxheight2);                     $("#flip-tabs").css({                         'height': maxheight2 + 'px'                     });                 }); 

your handlers work fine, of them correct. i've tried first one:

$('#fl1b').on("click", function (e) {     var maxheight2 = document.getelementbyid("fli1b").scrollheight;     console.log("new height: " + maxheight2);     $("#text_var").html(maxheight2);     $("#flip-tabs").css({         'height': maxheight2 + 'px'     }); }); 

there no element id flip-tabs in html, cannot tell more issue. if not issue :)

i've added div id, can see css call working too: check here: http://jsfiddle.net/balintbako/9wypl/ i'm assigning handler in $(document).ready() block, can difference in code.