title: jQuery toggle animation not playing smooth?
body: <p>Here is the <a href="http://jsfiddle.net/ravk/V5zL8/" rel="nofollow">JSFiddle</a></p>
  
  <p>Look at the animation, the gray background div expands and collapses with jerk (without animation).</p>
  
  <p>Can anyone help me out.</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div class="referrals-data"&gt;
  &lt;div class="data-contner"&gt;
  
  &lt;div class="table-elmnt"&gt;
  &lt;div class="referral-band row-elmnt"&gt;
      &lt;div class="clearfix cell-elmnt"&gt;
          &lt;div class="referral-id have-referrals"&gt;
              &lt;span class="referral-pic"&gt;&lt;/span&gt;
              &lt;span class="referral-name"&gt;Click me&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell-elmnt"&gt;
      $2000
      &lt;/div&gt;
      &lt;div class="cell-elmnt"&gt;
      $50
      &lt;/div&gt;
  &lt;/div&gt; &lt;!--referral-band--&gt;
  
      &lt;div class="my-referral"&gt;
          &lt;div class="referrals-data sub-referral"&gt;
              &lt;div class="table-elmnt"&gt;
                  &lt;div class="referral-band row-elmnt"&gt;
                      &lt;div class="clearfix cell-elmnt"&gt;
                          &lt;div class="referral-id"&gt;
                              &lt;span class="referral-pic"&gt;&lt;/span&gt;
                                  &lt;span class="referral-name"&gt;User&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="cell-elmnt"&gt;
                          $2000
                      &lt;/div&gt;
                      &lt;div class="cell-elmnt"&gt;
                          $50
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!--referral-band--&gt;
              &lt;/div&gt; &lt;!--table-elmnt--&gt;
          &lt;/div&gt;         
      &lt;/div&gt; &lt;!--my-referral--&gt;
  &lt;/div&gt; &lt;!--table-elmnt--&gt;
  </code></pre>
  
  <p> 
   </p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.my-referral').hide();
      $('.have-referrals').click(function () {
          if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
              $(this).addClass('show');
          }else{
              $(this).removeClass('show');
          };
          $(this).parent().parent().parent().children('.my-referral').slideToggle();
      });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.table-elmnt { display: table; width: 100%; }
  .row-elmnt { display: table-row; width: 100%; padding: ; } 
  .cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; } 
  .cell-elmnt:first-child { width: 70%; }
  .referrals-data { margin-bottom: 7px; }
  .data-contner { background: #d4d4d4; }
  .my-referral { padding-left: 25px; }
  .sub-referral { margin-bottom: 0; border-bottom: none; }
  .referral-id { float: left; padding-left: 20px; }
  .referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
  .referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
  .have-referrals { cursor: pointer; }
  </code></pre>