Как адаптировать изменение JS вкладок к высоте перехода при изменении вкладки?

У меня есть код, который успешно меняет некоторые вкладки при нажатии. Проблема, с которой я сталкиваюсь, заключается в том, что при изменении вкладки, если содержимое вкладки отличается по высоте, содержимое под ней подпрыгивает вверх и вниз при изменении.

Мне было интересно, есть ли способ адаптировать мои текущие настройки, чтобы добавить какой-то переход, чтобы содержимое под ним скользило вверх / вниз, когда содержимое выше изменяется при нажатии?

Любая помощь будет оценена. Заранее спасибо!

JSFiddle

$(".tab-content .group").hide(); // Initially hide all content
$(".tabs li:first").attr("id","current"); // Activate first tab
$(".tab-content .group:first").fadeIn(); // Show first tab content
$('.tabs li a').click(function(e) {
   e.preventDefault();
   if ($(this).attr("id") == "current"){ //detection for current tab
     return       
   } else{             
     $(".tab-content .group").hide(); //Hide all content
     $(".tabs li").attr("id",""); //Reset id's
     $(this).parent().attr("id","current"); // Activate this
     $($(this).attr('href')).fadeIn(); // Show content for current tab
   }
});