How to get the height of a div that is expandable & collapsible
<p>Hope to get some help on this, I'm no expert on jQuery so bear with me.</p>

<p>I have 2 expandable/collapsible <code>&lt;div&gt;</code>'s containing dynamic search refinement links, the default collapsed state shows the first 12 links with a 'show more' toggle button which when clicked expands the <code>&lt;div&gt;</code> to reveal the full set of links.</p>

<p>I need to know the height of these <code>&lt;div&gt;</code>'s which I can get like this:</p>

<pre><code>var heightRefLinks = $('.search-refine').outerHeight(true);
</code></pre>

<p>But this only captures the collapsed height prior to the 'show more' toggle button being clicked, how do I get the expanded height also?</p>

<p>The reason I need to do this is because I have a toolbar element which 'sticks' to the top of the viewport once you've scrolled to it, the toolbar is only required to 'stick' to the viewport whilst the search results listings are in view, once they're not in view then the toolbar becomes 'unstuck' from the viewport. In order to 'unstick' I have to set a px value for the plugin option: <code>bottomBound</code> which is the height in px from the bottom of the viewport to the bottom of the listings. I have a few elements underneath the listings and they all have static heights so it's no bother getting the 'unstick' behaviour to work but then came the aforementioned expandable/collapsible <code>&lt;div&gt;</code>'s.</p>

<p><strong>EDIT:</strong> Included the jQuery which uses this plugin: <a href="http://themousepotatowebsite.co.za/introducing-the-stick-to-top-plugin/" rel="nofollow">http://themousepotatowebsite.co.za/introducing-the-stick-to-top-plugin/</a></p>

<pre><code>// get the heights of various elements
var heightToolbar = $('.sticky-panel-toolbar').outerHeight(true);
var heightContentMeta = $('.property-listing-meta').outerHeight(true);
var heightLastPropItem = $('.property-listing:last-child &gt; .property-tile:last-   child').outerHeight(true);
var heightFooter = $('.footer').outerHeight(true); 
// set bottom gaps
var bottomGap = heightFooter + 32;
var bottomGapToolbar = heightToolbar + heightFooter + heightContentMeta +    heightLastPropItem;

// 'Toolbar - Search Results' version
$('.sticky-panel-toolbar-search').stickToTop({
bottomBound: bottomGapToolbar,
onStick: function() {
    $(this).addClass('stuck');
},
onDetach: function() {
    $(this).removeClass('stuck');
}
});
</code></pre>

<p><code>heightContentMeta</code> is what I'm struggling with as this is the container <code>&lt;div&gt;</code> for everything that comes after the search results listing and within this <code>&lt;div&gt;</code> are the 2 expandable/collapsible <code>&lt;div&gt;</code>'s. I also have a Google Adwords injected <code>&lt;iframe&gt;</code> in there also which I'm also having trouble getting the height but I wanted to focus on the expandable/collapsible <code>&lt;div&gt;</code>'s first.</p>
