title: How to collapse all divs with change of a tab in jQuery Tabs UI?
body: <p>I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.</p>
  
  <p>I'm also using a bit of jQuery to independently expand/collapse each entry-content div:</p>
  
  <pre><code>$(".entry-content").hide();
  $(".entry-title").click(function() {
  $(this).parent().children(".entry-content").slideToggle(500); });
  </code></pre>
  
  <p>What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.</p>
  
  <p>What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.</p>
  
  <p>What do I need to add to this function to collapse all the entry-content divs when a tab is changed?</p>
  
  <pre><code>$(document).ready(function(){ 
  var $tabs= $("#tabs").tabs(); 
  });
  $(function() {
  $('#tabs').tabs({
  fx: { opacity:'toggle' }
  });
  });
  </code></pre>
  
  <p><strong>Main tabs and entry-content div markup:</strong></p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabone"&gt;tabone&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabtwo"&gt;tabtwo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabthree"&gt;tabthree&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="tabone"&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="tabtwo"&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="entry-post"&gt;
  &lt;h1 class="entry-title"&gt;Title&lt;/h1&gt;
  &lt;div class="entry-content"&gt;Lorem ipsum...  
  &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="tabthree"&gt;
  
  ....
  
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>