{data.header}
hero-tab-{tabIterator.cycle}
{f:if(condition: '{tab.is_active}', then: '1', else: '0')}
{f:if(condition: '{tabIterator.isFirst}', then: '1', else:'0')}
-
hero-tab-{tabIterator.cycle}
{f:if(condition: '{tab.is_active}', then: '1', else: '0')}
{f:if(condition: '{tabIterator.isFirst}', then: '1', else:'0')}
{item.title}
{item.description}
{item.title}
{item.description}
{pluginItem.content}
document.addEventListener('DOMContentLoaded', function () {
const tabLinks = document.querySelectorAll('.hero-tab-link');
const tabContent = document.querySelector('.hero-tabs-content');
if (tabLinks.length > 0 && tabContent) {
function updateContentColor(color) {
// Remove all color classes pattern 'bg-*'
const classes = tabContent.className.split(" ").filter(c => !c.startsWith('bg-tab-'));
tabContent.className = classes.join(" ").trim();
// Add new color class
if (color) {
tabContent.classList.add('bg-tab-' + color);
}
}
// Initial set from active tab
const activeTab = document.querySelector('.hero-tab-link.active');
if (activeTab) {
updateContentColor(activeTab.dataset.color || 'primary');
}
// Listen for tab changes
tabLinks.forEach(link => {
link.addEventListener('shown.bs.tab', function (event) {
const color = event.target.dataset.color || 'primary';
updateContentColor(color);
});
});
}
});