Block: “Tabs” doesn’t work as expected

Hi @phlei

Thanks for reaching out!

Can I check, are you including the Bootstrap JS that comes bundled in with the plugin? The option is set in Bootstrap > Dashboard > Include Bootstrap JS.

The hiding of tab content is done via JS so if this isn’t checked then the tab content will not be hidden. You have two options, you can check this option so the JS is automatically included, or you can add some custom JS to manage the tab functionality.

Below is the code that gets included so you can add this into your own JS file if needed and include it on the page.

jQuery(document).ready(function($){

	$( '.areoi-tabs' ).each( function() {

		var active = $( this ).find( '.nav a.active:first-of-type' );

		$( this ).find( '.nav a.active:not(:first-of-type)' ).removeClass( 'active' );

		$( this ).find( '> div' ).addClass( 'tab-pane d-none' );

		var active_tab = $( this ).find( active.attr( 'href' ) );

		if ( active_tab ) {
			active_tab.removeClass( 'd-none' );
		}
	});

	$( document ).on( 'click', '.areoi-tabs .nav a', function( e ) {
		var href = $(this).attr('href');
	    if (href && href.startsWith('#')) {
	        e.preventDefault();

	        var container = $( this ).parents( '.areoi-tabs' );
			var active_tab = container.find( $( this ).attr( 'href' ) );
			
			container.find( '.nav a' ).removeClass( 'active' );
			$( this ).addClass( 'active' );

			if ( active_tab ) {
				container.find( '> div' ).addClass( 'd-none' );
				active_tab.removeClass( 'd-none' );
			}
	    }
	} );

});

Hopefully, this helps you resolve your issue, but if not please could you provide a link to a staging site so that I can debug the issue?

Thanks
Miles