GenerateBlocks Pro is extremely powerful, but there are a few common elements missing such as tabs. In this video, I’ll show you how to create your own custom tabs that use only some basic code I’ll provide for you to make it work.

My new tech stack is going to be Gutenberg with GeneratePress as my primary theme and GenerateBlocks Pro as my block plugin of choice. If you want to see more tutorials like this, please be sure to let me know.

Get GenerateBlocks Pro: https://jonathanjernigan.com/go/generateblocks
Get GeneratePress Pro: https://jonathanjernigan.com/go/generatepress 

Learn more about Taylor Drayson here.

Code used in tutorial below:

Step 1. Add this to functions.php

<style>
    [data-tab-content]{
        display: none;
    }
    [data-tab-content].active{
        display: block;
    }
    [data-tab]{
        cursor: pointer;
    }
    .activeTab{
        background: orange;
		color: white;
    }
    
</style>

<script>
    jQuery( document ).ready(function($) {
        
        $(document).on("click","[data-tab]",function() {
            const element = $(this);
            const tabID = element.data('tab');
            
            const tabContent = $(`[data-tab-content="${tabID}`);
            
            const currentElement = $(`[data-tab].activeTab`);
            const currentTab = $(`[data-tab-content].active`);
            
            
            element.addClass('activeTab');
            currentElement.removeClass('activeTab');
            currentTab.removeClass('active').hide();
            tabContent.addClass('active').show();
            
        });    
    });
    
</script>

Step 2: Add this (if your site doesn’t already have jquery enqueued)

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'jquery' );
} );