<script>
$( document ).ready(function() {
//Прописываем классы табов
let classTab = ['a'];
//Объединяем блоки в секции
$.each(classTab, function(index,value) {
let zeroGrp = ""; let tabCl = '.dbltab-'+value+'_1';
$(tabCl).addClass('act-tab');
$(tabCl).each(function( index ) { zeroGrp += '#'+$(this).closest('.t-rec').attr('id')+',' });
$(zeroGrp.slice(0, -1)).wrapAll('<div class="tabsgroup"></div>');
//Прописываем атрибуты нашим вкладкам
let tabsRec = $(tabCl+":first").closest('.t-rec');
let tabsBtnNum = tabsRec.find('div[class*="'+value+'"]').length;
for (let i=1; i<=tabsBtnNum;i++){ $('.dbltab-'+value+'_'+i).attr('data-tab-index',i)};
//Создаём внутренние секции
let tabSect = '.smtab-'+value+'_1-1';
let mainGroup = $(tabSect).closest('.tabsgroup');
let numOfSmTab = mainGroup.find('div[class*="smtab-"]').length;
for (let i=1; i<=numOfSmTab;i++){
let zeroSection = "";
let tabS = '.smtab-'+value+'_'+i+'-1';
$(tabS).each(function( index ) { zeroSection += '#'+$(this).closest('.t-rec').attr('id')+',' });
$(zeroSection.slice(0, -1)).wrapAll('<div class="t-rec sectiongroup"></div>');
};
});
//Оставляем только 1ый видимый блок из набора
$('.tabsgroup').each(function() {
$(this).children('.t-rec:not(:first)').addClass('outV outI posAn');
});
//Оставляем только 1ый видимый блок из секции
$('.sectiongroup').each(function() {
$(this).children('.t-rec:not(:first)').addClass('outV outI posAn');
});
//Переключение блоков
function changeTab(em,el){
em.height( em.children('.t-rec:eq('+el+')').height() );
em.children('.t-rec:eq('+el+')').removeClass('outV outI');
em.children('.t-rec').not(':eq('+el+')').addClass('outV outI');
em.find('.act-tab').removeClass('act-tab');
em.find('.tn-elem[data-tab-index="'+(el+1)+'"]').addClass('act-tab');
};
//При клике на основной таб
$('div[class*="dbltab-"]').click(function(){
let blkNum = +$(this).attr('data-tab-index')-1;
let tabsGroup = $(this).closest('.tabsgroup');
tabsGroup.children('.t-rec').addClass('outV outI');
changeTab(tabsGroup,blkNum);
});
//При клике на внутренний таб
$('div[class*="smtab-"]').click(function(){
let activeGroup = $(this).closest('.tabsgroup');
let activeSection = $(this).closest('.sectiongroup');
let activeSectionBlock = $(this).closest('.t-rec');
let className = $(this).attr('class');
className = className.split(' ');
let indexBtn = 0;
for (let i=0; i<className.length;i++){
if( className[i].includes('smtab-') ){
indexBtn = +className[i].split('-')[2];
activeSection.find('div[class*="smtab-"]').removeClass('act-sm-tab');
activeSection.find('.'+className[i]).addClass('act-sm-tab');
};
};
activeSection.children('.t-rec').addClass('outV outI');
activeSection.height( activeSection.children('.t-rec:eq('+(indexBtn-1)+')').height());
activeGroup.height( activeSection.children('.t-rec:eq('+(indexBtn-1)+')').height());
activeSection.children('.t-rec:eq('+(indexBtn-1)+')').removeClass('outV outI');
});
//При ресайзе
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){
$('.act-sm-tab').click(); $('.act-tab').click();
}, 2000);});
});
</script>
<style>
.t-rec.posAn{
position : absolute;
width:100%;
top:0;
}
.outV{opacity:0}
.outI{z-index:-1}
.tabsgroup , .outInd { position: relative}
.tabsgroup { overflow: hidden}
.tn-elem[class*="dbltab"],
.tn-elem[class*="smtab-"]
{
cursor:pointer;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.stoptab{pointer-events:none}
.timestep{ transition:all 500ms ease-in-out}
.tn-elem[class*="dbltab"] .tn-atom {
transition: all 0.1s ease-in-out;
}
.tn-elem[class*="dbltab"] .tn-atom:hover {
color: #767676 !important;
}
</style>