Developed a custom function that dynamically creates tabs by accepting element IDs as arguments and adding event listeners to respond to click events. Here's the code snippet for reference:
function toggleTabs() {
var panel = [], li = [];
for(var i = 1, j = arguments.length; i <= j; i++) {
li[i] = document.getElementById(arguments[i - 1]);
panel[i] = 'panel' + i;
}
document.getElementById('toggle').addEventListener('mouseup', function(event) {
var target = event.target.id;
for(var i = 1, j = li.length; i <= j; i++) {
if(li[i].id === target) {
document.getElementById(panel[i]).style.display = 'block';
setTimeout(function() {
document.getElementById(panel[i]).style.opacity = '1';
window.alert('fired');
}, 500);
li[i].className = 'active';
} else if(target.substring(0,3) === 'tab'){
document.getElementById(panel[i]).style.display = 'none';
document.getElementById(panel[i]).style.opacity = '0';
li[i].className = null;
}
}
}, false);
}
if(url === '/customers') { toggleTabs('tab-c-featured', 'tab-c-view'); }
Although the function works fine, I wanted to add a fade-in effect to the elements when triggered. However, the transition doesn't seem to work due to the display property changes overriding the opacity effect. To address this, I implemented a timeout feature, but it's not functioning properly. I even included a window alert for testing purposes, but it's not firing. Any insights on why this might be happening?
Thank you!