title: Change div height when tab is selected
body: <p>I have a tabbed content that has 4 tabs and in each there are going to be two divs that make up the border design. The problem that I'm running into is that I have no idea how to animate the divs to change height when the tab they're located in is selected. I have a <a href="http://jsfiddle.net/jw6tH/" rel="nofollow">fiddle for reference</a> and the markup is below.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;ul class="tabs"&gt;
      &lt;li class="tab-link current" data-tab="tab-1" id="welcome_selector"&gt;Welcome&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-2"&gt;Tab Two&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-3"&gt;Tab Three&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-4"&gt;Tab Four&lt;/li&gt;
  &lt;/ul&gt; 
  &lt;div class="tabcontentcontainer"&gt;
  &lt;div id="tab-1" class="tab-content current"&gt; &lt;div class="bordertop_animate"&gt; &lt;/div&gt;welcome tab will be empty, save for the borders &lt;div class="borderbottom_animate"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="tab-2" class="tab-content"&gt;&lt;div class="bordertop_animate"&gt;&lt;/div&gt;        tab 2 content&lt;div class="borderbottom_animate"&gt;&lt;/div&gt;  &lt;/div&gt;
  &lt;div id="tab-3" class="tab-content"&gt;&lt;div class="bordertop_animate"&gt;&lt;/div&gt;        tab 3 content&lt;div class="borderbottom_animate"&gt;&lt;/div&gt;  &lt;/div&gt;
  &lt;div id="tab-4" class="tab-content"&gt;&lt;div class="bordertop_animate"&gt;&lt;/div&gt;        tab 4 content&lt;div class="borderbottom_animate"&gt;&lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
  width: 1000px;
  min-height: 400px;
  margin: 0 auto;
  }
  
  ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  background: #000;
  vertical-align: middle;
  font-weight: 400;  
  color:#FFF;
  text-align: right;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 0.6px;
  }
  
  ul.tabs li {
  background: #000;
  vertical-align: middle;
  font-weight: 400;  
  color:#FFF;
  text-align: right;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 0.6px;
  display: inline-block;
  padding: 55px 15px 55px 15px;
  cursor: pointer;
  }
  
  ul.tabs li.current {
  background: #000;
  color: #FFF;
  }
  
  #welcome_selector {
  float: left;
  padding-left: 128px;
   }
  
  .tabcontentcontainer {
  height: 400px;
  width: 1000px;
  background: url(http://placehold.it/1000x400) #000;
  position: relative;
  }
  
  .tab-content {
  display: none;
  background: rgba(0, 0, 0, 0.0);
  padding: 15px;
  }
  
  .tab-content.current {
  display: inherit;
  }
  
  .bordertop_animate {
  position: absolute;
  height: 38px;
  width: 966px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  border-bottom: 0px solid #FFF;
  border-left: 2px solid #FFF;
  }
  
  .borderbottom_animate {
  position: absolute;
  bottom: 15px;
  height: 38px;
  width: 966px;
  border-top: 0px solid #FFF;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  border-left: 2px solid #FFF;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
  
  $('ul.tabs li').click(function(){
      var tab_id = $(this).attr('data-tab');
  
      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');
  
      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
  })
  
  })
  </code></pre>
  
  <p>I'd like for the first tab to keep current divs height which is 38px, however I'd like the other 3 tabs to have theirs at a height of 185px- but for the height to grow from 38px to 185px when the tab is selected. The animation would be similar to if the divs had a :hover css selector applied with a 0.5s transition, except it would happen when the tab is selected, not on mouseover.</p>
  
  <p>Sorry if this isn't detailed or specific enough, this is my first time posting a question/and dealing with jquery.</p>