title: Multiple jQuery UI Tabs on Page: Close all other tabs when another is opened
body: <p>I've got several rows of of separate jQuery Tabs. How do I get the separated tabs to close when another is opened (so at max, 1 is open at any given time on the page):</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;!-- First Leadership Row --&gt;
  &lt;div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#leader1-slug"&gt;Leader 1 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader2-slug"&gt;Leader 2 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader3-slug"&gt;Leader 3 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader4-slug"&gt;Leader 4 Tab Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="leader1-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 1 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader2-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 2 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader3-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 3 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader4-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 4 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- #leadershipTabs --&gt;
  &lt;!-- #First Leadership Row --&gt;
  
  &lt;!-- Second Leadership Row --&gt;
  &lt;div id="leadershipTabs2" class="leadershipTabs leadershipContentContainer contentContainer clearfix"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#leader5-slug"&gt;Leader 5 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader6-slug"&gt;Leader 6 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader7-slug"&gt;Leader 7 Tab Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#leader8-slug"&gt;Leader 8 Tab Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
      &lt;div id="leader5-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 5 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader6-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 6 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader7-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 7 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="leader8-slug" class="leaderPod"&gt;
          &lt;div class="leaderPodContent ctrContent"&gt;&lt;!-- Leader 8 Content Here --&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- #leadershipTabs --&gt;
  &lt;!-- #Second Leadership Row --&gt;
  </code></pre>
  
  <p>Firing the jQuery Tabs:</p>
  
  <pre><code>jQuery('.leadershipTabs').tabs({
      active: false,
      collapsible: true 
  });
  </code></pre>