On my webpage, I have multiple tabs such as Features, Overview, Images, and more. What I aim to achieve is to hide the Feature tab and its content when there is no content available. Only Overview and Images tabs should be visible with Overview being the active one and showing its content by default. Currently, I have managed to hide the Feature tab, but the Overview tab does not automatically become active. It only becomes active when clicked. Additionally, the content for the Overview tab remains hidden until specifically clicked. I am using JQuery to implement this functionality.
// Removing tabs without content
if ($(".tab-content-doc:eq(0) p").length == 0) {
$("ul.tabs li").eq(0).hide();
}
if ($(".tab-content-doc:eq(1) img").length == 0) {
$("ul.tabs li").eq(1).hide();
}
if ($(".tab-content-doc:eq(2) tr.alt").length == 0) {
$("ul.tabs li").eq(2).hide();
}
if ($(".tab-content-doc:eq(3) div.prod-table-thumbnail").length == 0) {
$("ul.tabs li").eq(3).hide();
}
if ($(".tab-content-doc:eq(4) div.prod-table-thumbnail").length == 0) {
$("ul.tabs li").eq(4).hide();
}
if ($(".tab-content-doc:eq(5) span.video-wrapper").length == 0) {
$("ul.tabs li").eq(5).hide();
}
Thank you in advance for any suggestions on how to resolve this issue.
$("ul.tabs li:first").show(); // Activate the first tab
$(".tab-content-doc").hide(); // Hide all tab content
$(".tab-content-doc:first").show(); // Show the content of the first tab
$("a.magnifying-glass.open-cbox").colorbox({opacity: '0.75', html: function () {
var _html = document.createElement('div');
_html.innerHTML = document.getElementById('prod-img-zoom').innerHTML;
return _html;
}});
The code snippet above is from XSLT. The template file contains this code which should replace the initial logic with the corrected one, but it is still not functioning as expected.
//--Features
if ($(".tab-content-doc:eq(0) p").length == 0) {
$("div.tab-content").eq(0).hide();
$("div.tabs").eq(0).hide();
$("ul.tabs li").eq(0).hide();
}
//--Overview
if ($(".tab-content-doc:eq(1) img").length != 0) {
$("ul.tabs li").eq(1).show();
}
//--Images & Videos
if ($(".tab-content-doc:eq(2) div.tab-content-wrapper").length != 0) {
$("ul.tabs li").eq(2).show();
}
var activeTab = defaultTab();
if(activeTab != null && activeTab != "" && activeTab != "undefined") {
var index = activeTab.replace("tab","") - 1;
// Check if it's a valid tab to show
if ($("ul.tabs li").eq(index).is(":visible")) {
$("ul.tabs li").removeClass("active").addClass("inactive"); // Replace "active" class
$("ul.tabs li:eq("+ index +")").removeClass("inactive").addClass("active"); // Replace "active" class with selected tab
$(".tab-content-doc").hide(); // Hide all tab content
$(".tab-content-doc:eq("+ index +")").show(); // Show content of selected tab
}
}