How to make a smooth transition between tabs?

5e0d13366990f333197336.png
there is a table like on the screenshot
-div
--div
--div

the switching is via JS
oxygenVSBInitTabs function(element) {
 if (element!==undefined) {
 jQuery(element).find('.oxy-tabs-wrapper').addBack('.oxy-tabs-wrapper').each(function(index) {
 jQuery(this).children('.oxy-tabs-wrapper > div').eq(0).trigger('click');
});
}
 else {
 jQuery('.oxy-tabs-wrapper').each(function(index) {
 jQuery(this).children('.oxy-tabs-wrapper > div').eq(0).trigger('click');
});
}
}

 jQuery(document).ready(function() {
 let event = new Event('oxygenVSBInitTabsJs');
document.dispatchEvent(event);
});

document.addEventListener("oxygenVSBInitTabsJs",function(){
oxygenVSBInitTabs();
},false);

 // handle clicks on tabs 
 jQuery("body").on('click', '.oxy-tabs-wrapper > div', function(e) {

 /* a tab or an element that is a child of a tab has been clicked. prevent any default behavior */
//e.preventDefault();

 /* which tab has been clicked? (e.target might be a child of the tab.) */
 clicked_tab = jQuery(e.target).closest('.oxy-tabs-wrapper > div');
 index = clicked_tab.index(); 

 /* which tabs-wrapper. tab is this inside? */
 tabs_wrapper = jQuery(e.target).closest('.oxy-tabs-wrapper');

 /* what class dp we use to signify an active tob? */
 class_for_active_tab = tabs_wrapper.attr('data-oxy-tabs-active-tab-class');

 /* make all the other tabs in this tabs-wrapper is inactive */
 jQuery(tabs_wrapper).children('.oxy-tabs-wrapper > div').removeClass(class_for_active_tab);

 /* make the clicked tab the active tab */ 
 jQuery(tabs_wrapper).children('.oxy-tabs-wrapper > div').eq(index).addClass(class_for_active_tab);

 /* which tabs-contents-wrapper is used by these tabs? */
 tabs_contents_wrapper_id = tabs_wrapper.attr('data-oxy-tabs-contents-wrapper');

 /* try to grab the correct content wrapper, in case of duplicated ID's */
 $content_wrapper = jQuery(tabs_wrapper).next();
 if( $content_wrapper.attr("id") != tabs_contents_wrapper_id ) $content_wrapper = jQuery( '#' + tabs_contents_wrapper_id );

 $content_tabs = $content_wrapper.children( "div" );

 /* hide all of the content */
$content_tabs.addClass('oxy-tabs-contents-content-hidden');

 /* unhide the content corresponding to the active tab*/
$content_tabs.eq(index).removeClass('oxy-tabs-contents-content-hidden');

 });

as I understand it
jquery.js?ver=1.12.4-wp

tell me how to make animation between tabs like here https://codepen.io/P233/pen/LobqH/
April 4th 20 at 00:31
1 answer
April 4th 20 at 00:33
Solution
Then you need to look at written code. Maybe there is a substitution of text, maybe one is hiding the other block can change width/height of the block and the screen is guesswork.

Find more questions by tags JavaScript