$(document).ready(function() {
  
  var $wrapper = $('.tab-wrapper'),
      $alltabs = $wrapper.find('.tab-content > div'),
      $tabmenu = $wrapper.find('.tab-menu li'),
      $line = $('<div class="line"></div>').appendto($tabmenu);
  
  $alltabs.not(':first-of-type').hide();  
  $tabmenu.filter(':first-of-type').find(':first').width('100%')
  
  $tabmenu.each(function(i) {
    $(this).attr('data-tab', 'tab'+i);
  });
  
  $alltabs.each(function(i) {
    $(this).attr('data-tab', 'tab'+i);
  });
  
  $tabmenu.on('click', function() {
    
    var datatab = $(this).data('tab'),
        $getwrapper = $(this).closest($wrapper);
    
    $getwrapper.find($tabmenu).removeclass('active');
    $(this).addclass('active');
    
    $getwrapper.find('.line').width(0);
    $(this).find($line).animate({'width':'100%'}, 'fast');
    $getwrapper.find($alltabs).hide();
    $getwrapper.find($alltabs).filter('[data-tab='+datatab+']').show();
  });

});//end ready