How to add animation?

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');

 });


the code to switch tabs in the table. by pressing the button on the oxy-tabs-wrapper
open the desired tab in oxy-tabs-contents-wrapper and the rest are hiding

5e13e5b2a67cb681435941.png

I want to add animation when switching here https://codepen.io/P233/pen/LobqH/
April 4th 20 at 01:00
0 answer

Find more questions by tags jQuery