title: jQuery UI Tabs conundrum when tab-panel parent element is collapsed
body: <p>I'm building a panel control that makes use of jQuery UI tabs, and looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/lKMQ2.png" alt="alt text"></p>
  
  <p>The tabs are in the header and the tab panels are nested inside the parent element under a single containing (<code>div.form-panel-contents</code>) that I use for expanding/collapsing the panel contents. The problem is when I collapse the containing div via slideUp, somehow Tabs detects that the tab panels container is not visible and applies the CSS class <code>ui-tabs-hide</code> to each of the nested tab panels, which sets all tab panels to <code>display: none</code>.</p>
  
  <p><strong>My question is how can I stop it from applying <code>ui-tabs-hide</code> class when parent div is collapsed?</strong> </p>
  
  <p>When I change the state of the containing div I want the state of the tab panels to remain intact, so that the slide up/down looks fluid. I'm also curious how the tool even detects that the parent element was collapsed in the first place.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>if ($.fn.tabs)
      $(".ui-tabs").tabs();
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;div class="widget ui-tabs form-panel-container"&gt;
      &lt;ul class="title_bar"&gt;
          &lt;li class="handle"&gt;&lt;h5&gt;New Panel Look - Test &lt;span class="asterisk"&gt;&lt;/span&gt;&lt;/h5&gt;&lt;/li&gt;
          &lt;li class="leaf"&gt;&lt;a class="leaf_link" href="#tab_name_1"&gt;Tab Name 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="leaf"&gt;&lt;a class="leaf_link" href="#tab_name_2"&gt;Tab Name 2&lt;/a&gt;&lt;/li&gt;
          &lt;li class="leaf"&gt;&lt;a class="leaf_link" href="#tab_name_3"&gt;Tab Name 3&lt;/a&gt;&lt;/li&gt;                        
          &lt;li class="handle_buttons"&gt;&lt;a href="" class="handle_btn expand"&gt;&lt;/a&gt;&lt;a href="" class="handle_btn question"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="form-panel-contents"&gt;
          &lt;div&gt;
              &lt;div id="tab_name_1"&gt;
                  &lt;div class="text_area"&gt;
                      &lt;div class="padder"&gt;
                          &lt;p&gt; content content content content content content content content content content content content content content content content content content&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="action_bar"&gt;
                      &lt;div class="pad"&gt;
                          &lt;a href="" class="btn"&gt;&lt;label&gt;&lt;/label&gt;Name of Button&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- end wrapper div --&gt;
              &lt;div class="text_area" id="tab_name_2"&gt;
                  &lt;div class="padder"&gt;
                      &lt;textarea&gt;content content content content content content content content content content content content&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="text_area" id="tab_name_3"&gt;
                  &lt;div class="padder"&gt;
                      &lt;h5&gt;Input Something&lt;span class="asterisk"&gt;&lt;/span&gt;&lt;/h5&gt;
                      &lt;div class="title_container"&gt;&lt;input type="text" id="title"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>