title: Variables in event handler function is not dynamically resolving. Why?
body: <p>I'm having a list html element. I want to check the offsetheight of a child element which hides/toggles alternatively when clicked. The offsetheight is zero when its hidden and 76 when revealed.</p>
  
  <p>So, I have created a click event listener to the parent element wherein I assign the offsetheight of its child element to a JavaScript variable. Problem is the JavaScript variable always returns zero ie, the initial offsetheight value at the time of declaring the event listener.</p>
  
  <p>The value isn't changing dynamically. Though, in the browser console, I could see the offset height value changing between zero and 76. What's the reason for all this or what I should do to dynamically capture the offset properties of a toggling element? And p.s, there is no toggle event happening here. Toggle event listener is not helping me.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>jQuery('.container-tabs.hidden-xs.hidden-sm').click(function(){
      var a = $(this).attr('href');
      console.log(a);
      var height=document.querySelector('div'+a).offsetheight;
      console.log(height);
  });
  </code></pre>
  
  <p>The parent class's href attributes is the classname of the child element. I have used it to select the child element( I have used other direct selectors too but didn't help).The variable height always returns zero regardless of the element being visible or hidden.</p>