Animation on tabs

Other issue, I use the tabs on the left, I have 6 tabs, how can I show them with 2 columns where each column has 3 tabs, instead of 1 columns of 6 tabs?

Hello, for the animation, it is something we will need to check if possible.
For your second question, if you want two columns, you can add two columns and add two tabs widgets of three tabs.

Hey,
Thanks for the answer, I added with jQuery the Elementor entrance animation when I click the tabs button, it stop working from some reason, I want do have entrance and exit animation when I click the tab button for the tab content.
About the columns, I don’t want two set of tabs, I want the tab button to be two columns
Something like this

tab1-button tab4-button |
tab2-button tab5-button   | The contebt
tab3-button tab6-button  |

Hi, for the animation, I don’t know why it does not work as I prefer to avoid using jQuery, but for the columns, can you try this CSS code and tell me if it works for you?

.zeus-tabs .zeus-tab-title {
    width: 50%;
}

Hey, I tried the code it make them 50% but they don’t float one next to the other
it stay on one column.
How do you think I can make the animation?

Hi, for the animation you will need to see this with a dev as it is custom dev but for the columns, can you show me an example of what you want to do?

Hey, I found solution for the animation, I add the Elementor CSS file and used JS to add the animation.
About the columns, the layout changed and there is need for this.
I have other question about the tabs, when you are using mobile the tabs are one after the other and the first tab is open, if you large amount of text you can know that there is more tabs after the first, can the first tab be close like the others only on mobile so you can see all the tabs and open the one you want?

Hello, glad to hear that you found a solution.
For the tabs on mobile devices, we will try to see if we can add such a feature in a future release ??

Thanks, for the meanwhile I add background color to the active tab in mobile like it work on desktop, I didn’t it working (or did I do something with my custom code and it break your CSS)

I would need to see it live to see what can be wrong and try to give you the correct code.

Thanks, I fix it for now with some JS
I did this

tab_num = $(this).attr("data-tab");
$(".zeus-tab-mobile-title data-tab[" + tab_num + "]").addClass('zeus-active');

I also have some code to check is it mobile, but not sure it is needed

• This reply was modified 2 years, 10 months ago by mstudioIL.

Hello, glad you’ve found a way, please feel free to open a new ticket if you’re facing any other issue.

Thanks