jQuery(document).ready(function() {
    // Show the first tab by default
    $("#iframe").addClass("active");
    $(".tab-link[data-tab='iframe']").addClass("active"); // Add active class to the first tab
  
    $(".tab-link").click(function() {
      // Check if the clicked tab is already active
      if (!$(this).hasClass("active")) {
        // Get the target tab name from data-tab attribute
        const tabName = $(this).data("tab");
  
        // Find the currently active tab content and tab link
        const activeContent = $(".tab-content.active");
        const activeLink = $(".tab-link.active");
  
        // Hide the currently active tab content with a fadeOut transition
        activeContent.fadeOut(300, function() {
          // Remove active class from the currently active tab content and tab link
          activeContent.removeClass("active");
          activeLink.removeClass("active");
  
          // Add a delay of 0.5 seconds before showing the selected tab content with a fadeIn transition
          setTimeout(function() {
            $("#" + tabName).fadeIn(300).addClass("active");
          }, 500);
  
          // Set the active class to the selected tab and its content
          $(this).addClass("active");
          $(".tab-link[data-tab='" + tabName + "']").addClass("active");
        });
      }
    });
  });