title: jQuery Tabs with Animations
body: <p>I have a jQuery tab section - and I want to animate the panels within it. Below is the code.
  I basically want to make the "vertical-tabstrip-visible-content" a sliding panel - such that as each link is clicked, it will close the existing panels and slide the correct, corrosponding one into view.</p>
  
  <p>Any ideas how this could be achieved using jQuery?
  (I'm already using jQuery UI tabs for the tabbing effect).</p>
  
  <pre><code>   &lt;div id="tabstrip" class="vertical-tabstrip" &gt;
      &lt;ul class="vertical-tabstrip-tabs"&gt;
          &lt;li&gt;&lt;a href="#vid-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#vid-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#vid-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;                                         
      &lt;/ul&gt;
      &lt;div class="vertical-tabstrip-visible-content-container" id="vid-1"&gt;&lt;div class="vertical-tabstrip-visible-content"&gt;Content 1&lt;/div&gt;&lt;/div&gt;
      &lt;div class="vertical-tabstrip-visible-content-container" id="vid-2"&gt;&lt;div class="vertical-tabstrip-visible-content"&gt;Content 2&lt;/div&gt;&lt;/div&gt;
      &lt;div class="vertical-tabstrip-visible-content-container" id="vid-3"&gt;&lt;div class="vertical-tabstrip-visible-content"&gt;Content 3&lt;/div&gt;&lt;/div&gt;                    
  &lt;/div&gt;
  
  /**********************************************************
   jQUERY UI TABSTRIP
  ***********************************************************/
  
  .ui-tabs .ui-tabs-hide {
       display: none;
  }
  
  .ui-tabs a {
  
  }
  .ui-tabs-selected a {
      border-style: none;
      border-color: inherit;
      border-width: 0;
      background: url('../../images/demo-config-on.gif') no-repeat right 50% #f8a230;
      padding-right:18px;     color:#fff;     margin-right:-10px;     margin-bottom: 0px;
  }
  
  /**********************************************************
   HORIZONTAL TABSTRIP
  ***********************************************************/
  
  .vertical-tabstrip {
      margin: 0px;
      padding: 0px;
  }
  
  .vertical-tabstrip-tabs {
      float: left;
      width: 260px;   
      margin: 0px;
      background: #000;
  }
  
  .vertical-tabstrip-tabs li {
      text-align: left;
      list-style: none;
      font-size: 11px;
      padding: 0 0 0 10px;
      margin: 3px 0;
  }
  .vertical-tabstrip-tabs li a:link,
  .vertical-tabstrip-tabs li a:visited {
      display:block; padding:1px 8px 4px;
  }
  
  * html .vertical-tabstrip-tabs li a:link,
  * html .vertical-tabstrip-tabs li a:visited {
       padding:1px 8px 2px;
  }
  
  .vertical-tabstrip-tabs li a:hover,
  .vertical-tabstrip-tabs li a:active {
      background-color:#f8a230
  }
  
  .vertical-tabstrip-visible-content-container {
      padding: 3px 0 0 10px;
      display: table-cell;
      height: 100%;
  }
  .vertical-tabstrip-visible-content {
      display: table-cell;
      padding: 0px 0px 15px;
      background: #aaa;
  }
  </code></pre>