title: jQuery accordion "heightStyle: fill" with display set to none on page load
body: <h2>My World</h2>
  
  <ul>
  <li><strong>jQuery 1.9.1</strong></li>
  <li><strong>jQuery UI 1.10.3</strong>, although my <a href="http://jsfiddle.net/Y8B4W/1/" rel="nofollow">jsfiddle example</a> uses UI 1.9.2 and seems to work fine.</li>
  </ul>
  
  <h2>My Problem</h2>
  
  <p>There are many similar questions to this on stackoverflow, but I was unable to find a suitable answer. Basically I've got a jQuery accordion that is not to be displayed when the page loads, and its display can be changed to <code>block</code> via the jQuery <code>.toggle()</code> method. The toggle works fine, but the <code>heightStyle: "fill"</code> does not fill the space appropriately <em>unless</em> the parent div is displayed when the page is loaded, which I don't want.</p>
  
  <h2>My Attempts at Solutions</h2>
  
  <ul>
  <li>Repositioning the script at the end of the document and in the <code>&lt;head&gt;</code> section.</li>
  <li>Rearranging the order in which the toggle happens: there is a second element, <code>#map</code>, which is toggled off at the same time as the accordion is toggled on, and vice versa.</li>
  <li>As I am not entirely sure whether the accordion needs a parent container in the first place, I've tried it several ways: toggling the <code>#accordion</code> div, its parent div, and both div's. </li>
  <li>For good measure, I've also attempted the <code>.accordion( "refresh" )</code> method, as well as having a resizable container, on both the parent div and the <code>#accordion</code>. No soup.</li>
  <li>Various CSS positioning for the parent container and <code>#accordion</code>.</li>
  <li>Getting my hands dirty deep within jQuery.js. Given my fledgling experience with javascript, THAT didn't last long. Seriously, had to look up this thing <code>===</code>. :)</li>
  </ul>
  
  <h2>My, THIS is Interesting</h2>
  
  <p>When the toggle button is clicked to hide the accordion and show <code>#map</code> again, you can see the <code>heightStyle: "fill"</code> actually work for a second! I slowed the transition duration in the jsfiddle so that it can be seen more easily. </p>
  
  <p>SO, whatever is enabling the correct height calculation for <code>heightStyle: "fill"</code>, that is what I need to have happen all the time. Any suggestions appreciated!</p>
  
  <p><strong>js fiddle:</strong> <a href="http://jsfiddle.net/Y8B4W/1/" rel="nofollow">http://jsfiddle.net/Y8B4W/1/</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div&gt;
    &lt;div class="page-header"&gt;
      &lt;div id="menu"&gt;Menu&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="leftpanel"&gt;
      &lt;div id="accordion"&gt;
        &lt;h3&gt;Heading 1&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- ...repeat for three more headings/sections... --&gt;
      &lt;/div&gt;&lt;!--accordion--&gt;
    &lt;/div&gt;&lt;!-- #leftpanel --&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      color: #000;
  }
  .page-header {
      width: 100%;
      height: 3em;
      background: gray;
  }
  #menu {
      font-size: 1em;
      margin: 0.5em;
      font-weight: bold;
      cursor: pointer;
  }
  #leftpanel {
      display: none;
      background: blue;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 3em;
      left: 0;
      bottom: 0;
      width: 100%;
  }
  #map {
      position: absolute;
      bottom: 0;
      top: 3em;
      width: 100%;
      background: yellow;
      line-height: 1.5em;
  }
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>$( "#accordion" ).accordion({
      heightStyle: "fill",
      collapsible: true
  });
  $( "#menu" ).click(function() {
      $( "#map" ).toggle({
          duration: 2000
      });
      $( "#leftpanel" ).toggle({
          duration: 2000
      });
      $( "#accordion" ).accordion( "refresh" );
  });
  </code></pre>