SEO
Development
UX/UI Design
Migration
Shopify CMS
Other
Branding
Webflow CMS
Wordpress CMS
Google Advertising

This code helps to add custom tabs and switch multiple zero-blocks when clicked. It also provides the option to add custom arrows.

Switching multiple zero-blocks in Tilda by own buttons

Instruction

Add a zero-block, fill it with content, and create several buttons with the class: .tab_btn

Add 2 arrow icons with the classes `left_tab` and `right_tab` (if you want to switch using the arrows).

Make copies of the Zero-block and edit the content.

Insert the code into the page in the block "Other - T123".

Insert the IDs of all your blocks into the code on the page in "T123" as follows: `['#rec346064270', '#rec346073573']`.

The code has been copied
 <!-- Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π±Π»ΠΎΠΊ с Ρ‚Π°Π±Π°ΠΌΠΈ. ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… zero-block Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ½ΠΎΠΏΠΊΠΈ -->
 <!-- https://youx.agency/sozdaem-blok-s-tabami-pereklyuchenie-neskolkih-zero-block-cherez-knopki -->

<style>
  .t-rec.posAnsld{
    position : absolute;
    width:100%;
    top:0;
}
.outVis{opacity:0}
.outInd{z-index:-1}
.maintabsection , .outInd { position: relative}
.maintabsection { overflow: hidden}
.tab_btn , .right_tab,  .left_tab { 
    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 300ms ease-in-out}
</style>

<script>
$( document ).ready(function() {
let  timestep = 300;
//ID Zero
var sbZero = [
    ['#rec896331276','#rec943331277','#rec44431278']
    
    
];
//Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ ΠΎΠ±Ρ‰ΡƒΡŽ  сСкция для Π±Π»ΠΎΠΊΠΎΠ²    
$.each(sbZero, function(index) {
let groupID='';
    $.each(sbZero[index], function(key) {groupID += sbZero[index][key]+',' });
$(groupID.slice(0, -1)).wrapAll('<div class="maintabsection"></div>');
});
//ДобавляСм классы ΠΊ нашим Zero
$('.maintabsection').each(function() {
$(this).find('.t-rec:not(:first)').addClass('outVis outInd posAnsld');
});
function changeTab(em,el){
    em.height( em.find('.t-rec:eq('+el+')').height() );
    em.find('.t-rec:eq('+el+')').removeClass('outVis');
    em.find('.t-rec:eq('+el+') .tab_btn:eq('+el+')').addClass('actbtnZ');
    em.find('.t-rec').not(':eq('+el+')').addClass('outVis timestep');
    $('.tab_btn, .right_tab , .left_tab').addClass('stoptab').css('cursor','default');
    setTimeout(function(){
        em.find('.t-rec:eq('+el+')').removeClass('outInd');
        em.find('.t-rec').not(':eq('+el+')').addClass('outInd').removeClass('timestep');
        $('.tab_btn, .right_tab , .left_tab').removeClass('stoptab').css('cursor','pointer');
    }, timestep);  
};
//ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ
$('.tab_btn').click(function(){
    let mSect = $(this).closest('.maintabsection');
    let posBtn =  $(this).closest('.t-rec').find('.tab_btn').index(this); 
    mSect.find('.tab_btn').removeClass('actbtnZ');
    changeTab(mSect,posBtn);
});
//ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²ΠΏΡ€Π°Π²ΠΎ
$('.right_tab').click(function(){
    let mSect = $(this).closest('.maintabsection');mSect.addClass('acive_tab');
    let summBlk = mSect.find('.t-rec').length-1;
    let posArrow =  $(this).closest('.t-rec').index('.acive_tab .t-rec'); 
    mSect.removeClass('acive_tab');
    if(posArrow<summBlk){changeTab(mSect, posArrow+1)
    }else{ changeTab(mSect, 0)};
});
//ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²Π»Π΅Π²ΠΎ
$('.left_tab').click(function(){
    let mSect = $(this).closest('.maintabsection');mSect.addClass('acive_tab');
    let summBlk = mSect.find('.t-rec').length-1;
    let posArrow =  $(this).closest('.t-rec').index('.acive_tab .t-rec'); 
    mSect.removeClass('acive_tab');
    if(posArrow>0){changeTab(mSect, posArrow-1)
    }else{ changeTab(mSect, summBlk)};
});
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ $('.actbtnZ').click()}, 2000);});
});
</script>

Other modifications

Made on
Tilda