Create auto switching tab with Elementor, custom css and js

In this tutorial, we will create an automatically switching tab with Elementor, some custom CSS, and js. The tab will be switch automatically after a certain period of time. we can manually set the timing as well.

[@avro4741]

/*********** css **************/
.tab:after {
content: '';
display: block;
border-bottom: 3px solid #f783ac;
transform: scalex(0);
transition: transform 0ms ease-out;
}
.tab.active:after {
transform: scalex(1);
transform-origin: 0% 50%;
transition: transform 5000ms ease-in;
}
.tab.active a {
background: #bc85f2 !important ;
color: #fff !important;
}
body:not(.elementor-editor-active) .box.first_box {
display: block;
}
body:not(.elementor-editor-active) .box {
display: none;
}
body.elementor-editor-active .box {
display: block !important;
}
/*********** js **************/
jQuery(document).ready(function ($) {
let index = 0;
let delay = 5000;
let $tabs = $('.tab_wrap > .elementor-column-wrap > .elementor-widget-wrap');
let $contents = $(
'.content_wrap >.elementor-column-wrap > .elementor-widget-wrap'
);
let interval = setInterval(rotate, delay);
$('.tabFirst').addClass('active');
$('.tab_wrap .tab').each(function (i) {
$(this).click(function () {
index = i;
switchElement();
});
});
function rotate() {
index++;
if (index >= $tabs.children('.tab').length) {
index = 0;
}
switchElement();
}
//switch tabs
function switchElement() {
clearInterval(interval);
$(
'.tab_wrap > .elementor-column-wrap > .elementor-widget-wrap .tab'
).removeClass('active');
$(
'.content_wrap > .elementor-column-wrap > .elementor-widget-wrap .box'
).fadeOut(300);
let $tab = $tabs.children('.tab').eq(index);
$tab.addClass('active');
$contents.children('.box').eq(index).delay(300).fadeIn(300);
interval = setInterval(rotate, delay);
}
});
/******* note *********/
if it is not working for you. please recheck the selector in the JS file. on some elementor page the ".elementor-column-wrap" div is not there. so just remove it from the JS code. example below
let $tabs = $('.tab_wrap > .elementor-widget-wrap');
let $contents = $( '.content_wrap > .elementor-widget-wrap' );
$( '.tab_wrap > .elementor-widget-wrap .tab' ).removeClass('active');
$( '.content_wrap > .elementor-widget-wrap .box' ).fadeOut(300);

[@roamingwithsunil]

how can i pause on hover can please make it

[@dorotheedacosta-noble528]

Hello,
Thank you very much for this tutorial !
It’s working but there is a problem.
I added the code at the middle of a single page website and when I click on any tab, the page scroll at the top of the website.
Is it possible to ad some code in order to fix this problem ?
Maybe on the Click event ?
Thanks in advance for your help !

[@bambam0099]

Very nice, thank you, but, it would be very helpful to add your code in the comment section so you don' t have to type everything in to experiment with it.
Thanks again

[@Mehankarable]

Hi, good guide. But i cannot find "inner section" option in elemntor. Can you help?

[@hmdesignBD]

Thank you so much man! it works just fine. But I am facing a problem like if you keep the tab open and come back after some time the animation looks so odd.

[@JellyJolly-tiny]

Hi nice video its really helped and small thing without auto switching what will be the code?

[@PedroManescu-ln2rt]

does anybody has a solution that works for the new version of elementor with containers?
the html structure is so much different

[@adied7725]

How to change the background image or video for each elementor section for each
Tab, please? Thank you for the tutorial.

[@RutvikParmar-mb6be]

Its not working its sh0wing error of $contents not function and interval and also hidden box css is how to active on changing tabs

[@ashoksingh0110]

how i can get js and css code

[@mohammadfaizan8750]

When I click to tab can I increase time to pause near 30 second
but switch timing is normal 5 second

[@mohammadfaizan8750]

Plz give me solve and give me code to reply

[@LG-jt9du]

Hello, my screen flickers when switching the tab every time. Do you know how can I fix this? Great tutorial btw.

[@markodjurdjevic8916]

same here !

[@TheEdysocial]

elementor free?

[@victorgarciarios8889]

Thank you so much 🙌

[@SahilKhan-rp4bn]

Really great tutorial and content.

[@bouhama1881]

Great work Avro thanks
I tried but didn't work
can you add your code on the comments to test
many thanks

[@shashanksachan]

Great work keep it up 👍

[@NakulKumar-fv9dj]

Really greate & amazing

[@nisoPlay]

Hi bro your content is amazing, but channel is underrated.... 😒

[@kavithranshakthi3512]

This is not working for me

[@svenflatchen8202]

why?

[@SeanClarke]

Thank you.

[@nanoise_ID]

thanks

[@TrailBlazerShubham]

where is the code

[@AbdulWaheed-eq9ex]

you can type from video easily

[@svenflatchen8202]

Just modified the script in some parts:
****** START OF THE modified 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);
$tabs.eq(0).addClass('active');
$tabs.each(function (i) {
$(this).click(function () {
index = i;
switchElement();
});
});
function rotate() {
index++;
if (index >= $tabs.length) {
index = 0;
}
switchElement();
}
function switchElement() {
clearInterval(interval);
$tabs.removeClass('active');
$contents.fadeOut(300);
$tabs.eq(index).addClass('active');
$contents.eq(index).delay(300).fadeIn(300);
interval = setInterval(rotate, delay);
}
});
****** END OF THE modified script ******
I made the following changes:
- Simplified the selection of the tabs and content elements, eliminating the unnecessary wrapping elements and using more concise selectors.
- Removed the redundant use of children when selecting the tabs and content elements.
- Simplified the way the "active" class is added and removed from tabs.
- Removed unnecessary repetition of selectors in the switchElement function.
- Reordered some statements for better readability.

[@hey-its-ashraf]

It worked for me, thanks.

[@Klarheen]

You are a life saver, thanks man!!!!