(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Autoplay Tabs with Elementor, CSS and Javascript (JS)
In this tutorial, we will be making highly customizable animated autoscroll tabs that also has a content switcher. The code used for different versions are same, rest it dependent on your design/styling of the tabs.
Version #1 – Autoplay Tabs with vertical progress bar
- dm-left-tab-content is the CSS of the left tabs containers. In CSS, any styling added for this class is applied to inactive tabs.
- dm-tab-active is the CSS class that gets dynamically added by javascript to the active tab. Any styling that you add in CSS gets applied to the active tab.
- dm-progress-line-bg is the CSS of the spacer widget (or div if you’re coding from scratch) that acts as progress line background color.
- dm-progress-line is the CSS class of the spacer widget (or div if you’re coding from scratch) that acts as progress line.
- dm-progress-line-active is the CSS class that gets added dynamically by javascript to the active progress line. Any styling you do for this CSS is applied to active progress line. The transition property in here for height has value of 5s, this value determines how long the progress line will take to reach the end.
- dm-right-tab-content is the CSS class given to the right images or containers that change based on active tab.
- dm-right-tab-content-active is the extra CSS class that we only give to the first image or container so that it is showing by default. This CSS class is dynamically added to the active right tab container. Any styling added in here is applied to active right tab content.
The animation property here determines the intro animations for active right tab content.
Change ‘block’ to ‘flex’ if you are using containers for right tab instead of images. (Also change ‘block’ to ‘flex’ at line 132 in javascript for containers) - At line 166, change 5000 to your desired value for autoplay timing of tabs. This value is in ms, so 5000 means 5000ms i.e 5s. Make sure to match this with transition property of dm-progress-line-active as mentioned in point (4) above.
- To target individual elements for inactive/active tabs. Simply give that element a CSS class “Example: dm-element”. Then in CSS styling type “.dm-left-tab-content .dm-element“, any styling added in this would be applied to this element for inactive state. For active state simply use “.dm-tab-active .dm-element“.
Version #2, #3, #4 – Autoplay Tabs with horizontal progress bar
- dm-left-tab-content-2 is the CSS of the left tabs containers. In CSS, any styling added for this class is applied to inactive tabs.
- dm-tab-active-2 is the CSS class that gets dynamically added by javascript to the active tab. Any styling that you add in CSS gets applied to the active tab.
- dm-progress-line-2 is the CSS class of the spacer widget (or div if you’re coding from scratch) that acts as progress line.
- dm-progress-line-active-2 is the CSS class that gets added dynamically by javascript to the active progress line. Any styling you do for this CSS is applied to active progress line. The transition property in here for width has value of 5s, this value determines how long the progress line will take to reach the end.
- dm-right-tab-content-2 is the CSS class given to the images or containers that change based on active tab.
- dm-right-tab-content-active-2 is the extra CSS class that we only give to the first image or container so that it is showing by default. This CSS class is dynamically added to the active right tab container. Any styling added in here is applied to active right tab content.
The animation property here determines the intro animations for active right tab content.
Change ‘block’ to ‘flex’ if you are using containers for right tab instead of images. (Also change ‘block’ to ‘flex’ at line 140 in javascript for containers) - At line 173, change 5000 to your desired value for autoplay timing of tabs. This value is in ms, so 5000 means 5000ms i.e 5s. Make sure to match this with transition property of dm-progress-line-active-2 as mentioned in point (4) above.
- To target individual elements for inactive/active tabs. Simply give that element a CSS class “Example: dm-element”. Then in CSS styling type “.dm-left-tab-content-2 .dm-element“, any styling added in this would be applied to this element for inactive state. For active state simply use “.dm-tab-active-2 .dm-element“.
- For version #3 and #4, simply add height:100%;, z-index:0; to the CSS of .dm-progress-line-2 (line 35) in code below. Also make sure to make the rest of the elements have higher z-index to place it above progress bar.
Version #5 – Autoplay Tabs with Collapsible Subcontent
- dm-left-tab-content-5 is the CSS of the left tabs containers. In CSS, any styling added for this class is applied to inactive tabs.
- dm-tab-active-5 is the CSS class that gets dynamically added by javascript to the active tab. Any styling that you add in CSS gets applied to the active tab.
- dm-progress-line-bg-5 is the CSS class of the spacer widget (or div if you’re coding from scratch) that acts as the progress line background color.
- dm-progress-line-5 is the CSS class of the spacer widget (or div if you’re coding from scratch) that acts as progress line.
- dm-progress-line-active-5 is the CSS class that gets added dynamically by javascript to the active progress line. Any styling you do for this CSS is applied to active progress line. The transition property in here for height has value of 5s, this value determines how long the progress line will take to reach the end.
- dm-right-tab-content-5 is the CSS class given to the images or containers that change based on active tab.
- dm-right-tab-content-active-5 is the extra CSS class that we only give to the first image or container so that it is showing by default. This CSS class is dynamically added to the active right tab container. Any styling added in here is applied to active right tab content.
The animation property here determines the intro animations for active right tab content.
Change ‘block’ to ‘flex’ if you are using containers for right tab instead of images. (Also change ‘block’ to ‘flex’ at line 162 in javascript for containers) - dm-left-tab-subcontent-5 is the CSS class given to the collapsible container inside our dm-left-tab-content-5 container. This container will be hidden when not active by making its height to be 0px. For the active state, the height is calculated automatically but if you wish to not calculate height dynamically and want specific value for all, then simply follow above video tutorial to see what to remove and add from code.
(Note: Do not use margins in this container as the the margin will not get calculated dynamically by code. Use spacer or padding instead. If you still wish to use margins then please watch above video to remove dynamic height calculation OFF). - At line 196, change 5000 to your desired value for autoplay timing of tabs. This value is in ms, so 5000 means 5000ms i.e 5s. Make sure to match this with transition property of dm-progress-line-active-5 as mentioned in point (5) above.
- To target individual elements for inactive/active tabs. Simply give that element a CSS class “Example: dm-element”. Then in CSS styling type “.dm-left-tab-content-5 .dm-element“, any styling added in this would be applied to this element for inactive state. For active state simply use “.dm-tab-active-5 .dm-element“.