I’ve been trying to create a custom tab with elementor. I’ve taken two column container . The first column has a custom css class name of “tab-wrap” and the other column has a class name “content-wrap” . I have three icon list with a class name “tab” in the tab-wrap container. On the other column, I have three inner containers with a class name “box” for my content. The first inner container has another class name”first box”.I have used this code to make the custom tab. It automatically switches to the next and the correspondent content changes at the same time. but when other tabs are active, the first tab content is always visible. It is supposed to be hidden when the other tabs are active. please someone help me to solve this. Thansk in advance.
<script>
jQuery(document).ready(function ($) {
let index = 0;
let delay = 5000;
let $tabs = $('.tab-wrap .tab');
let $contents = $('.content-wrap .box');
let interval = setInterval(rotate, delay);
// Show the content of the first tab initially
$contents.hide(); // Hide all content boxes initially
$contents.filter('.first-box').show(); // Show the content box corresponding to the first tab initially
$tabs.each(function (i) {
$(this).click(function () {
if (index !== i) {
index = i;
switchElement();
}
});
});
function rotate() {
index++;
if (index >= $tabs.length) {
index = 0;
}
switchElement();
}
function switchElement() {
$tabs.removeClass('active');
let $tab = $tabs.eq(index);
$tab.addClass('active');
// Hide the content of the first tab before switching
$contents.filter('.first-box').hide();
$contents.hide(); // Hide all content boxes
$contents.eq(index).delay(300).fadeIn(300);
}
});
</script>.tab::after {
content: '';
display: block;
border-bottom: 3px solid #c41230;
transform: scalex(0);
transition: transform 0ms ease-out;
}
.tab.active::after {
transform: scalex(1) !important;
transform-origin: 0% 50% !important;
transition: transform 5000ms ease-in;
background: #000 !important;
}
.first-box{
display: block !important;
}
.box{
display: none;
}