есть таблица как на скрине
-div
--div
--div
переключение происходит через JS
function oxygenVSBInitTabs(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 is this tab 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 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');
});
я так понимаю это
jquery.js?ver=1.12.4-wp
подскажите как сделать анимацию между табами как здесь
https://codepen.io/P233/pen/LobqH/
