$(document).ready(function() {
  $(".jq-tab-panel").not(".active").css({ opacity: 0, visibility: "hidden" });
  $(".jq-tabs li:first").addClass("active");
  $("#tab1").addClass("active").css({ opacity: 1, visibility: "visible", transform: "translateY(0)" });

  $(".jq-tabs li").on("click", function() {
    var tabId = $(this).data("tab");

    if ($(this).hasClass("active")) return;

    $(".jq-tabs li").removeClass("active");
    $(this).addClass("active");

    $(".jq-tab-panel.active")
      .removeClass("active")
      .css({
        opacity: 0,
        transform: "translateY(-12px)",
        visibility: "hidden"
      });

    setTimeout(function() {
      $("#" + tabId)
        .addClass("active")
        .css({
          opacity: 0,
          transform: "translateY(-12px)",
          visibility: "visible"
        })
        .animate({ opacity: 1 }, 400)
        .css("transform", "translateY(0)");
    }, 80);
  });
});