Tab element

Overview

This element allows you to display smaller content tabs that can be placed inside columns and sections (as opposed to the tab section element which is a fullwidth element). You got various option on styling and tab positioning and can choose if you want to display icons as well with each tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

View more examples of tab element.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_tab_container position='top_tab' boxed='border_tabs' initial='1' av_uid='av-he8zx']
[av_tab title='No Icon Tab 1' icon_select='no' icon='1' av_uid='av-4nfz6t']
Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla <strong>consequat</strong> massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[/av_tab]
[av_tab title='No Icon Tab 2' icon_select='no' icon='25' av_uid='av-4mobth']
Vestibulum ante ipsum <strong>primis</strong> in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis

Alutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis <strong>condimentum</strong>, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
[/av_tab]
[av_tab title='No Icon Tab 3' icon_select='no' icon='64' av_uid='av-4btupx']
Alutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis
[/av_tab]
[/av_tab_container]

Customization

Tab colors

To custom style the tabs, active tab and tab content colors, please use the CSS below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

/*----------------------------------------
// CSS - Tabs color
//--------------------------------------*/

/* Tabs */
#top .tabcontainer .tab {
	background: #5482ab;
	color:#eeeeee;
	border:1px solid #43698c;
}
#top .tabcontainer .tab:hover {
	color:#FFF!important;
}


/* Active tab */
#top .tabcontainer .active_tab {
	background: #f3f3f3!important;
	color:#222;
	border:none!important;
}
/*Active tab on hover*/
#top .tabcontainer .tab.active_tab:hover {
	color:inherit!important;
}


/* tab content */
#top .tabcontainer .tab_content.active_tab_content {
	background: #f3f3f3!important;	
	/*border:none!important;*/
}

Anchor links for Tabs

To link a tab section,

  •  Let’s say we want to link the third tab section.
  • Click and open the tab first.
  • The URL of the tab will display in the address bar with a tab#ID at the end of the link.
  • Copy and paste the link into a button or text.

The URL pattern should look similar to:

http://domain.com/mypage/#tab-id-2

Activate tabs on hover

To activate tabs on hover please copy the below code and paste it into your functions.php

function change_tabsjs() {
	wp_dequeue_script( 'avia-module-tabs' );
	wp_deregister_script( 'avia-module-tabs' );
	wp_enqueue_script( 'avia-module-tabs', get_stylesheet_directory_uri().'/js/tabs.js', array('jquery'), 3, true );
 }
 add_action( 'wp_enqueue_scripts', 'change_tabsjs', 100 );

Then go to /enfold/config-templatebuilder/avia-shortcodes/tabs/ and copy tabs.js file to /js/ folder in your child theme and replace the content of the file with following

// -------------------------------------------------------------------------------------------
// Tab Shortcode
// -------------------------------------------------------------------------------------------

(function($)
{
	"use strict";

	$.fn.avia_sc_tabs= function(options)
	{
		var defaults =
		{
			heading: '.tab',
			content:'.tab_content',
			active:'active_tab',
			sidebar: false
		};

		var win = $(window),
			options = $.extend(defaults, options);

		return this.each(function()
		{
			var container 	= $(this),
				tab_titles 	= $('<div class="tab_titles"></div>').prependTo(container),
				tabs 		= $(options.heading, container),
				content 	= $(options.content, container),
				newtabs 	= false,
				oldtabs 	= false;

			newtabs = tabs.clone();
			oldtabs = tabs.addClass('fullsize-tab').attr('aria-hidden', true );
			tabs = newtabs;

			tabs.prependTo(tab_titles).each(function(i)
			{
				var tab = $(this),
					the_oldtab = false;

				if(newtabs)
				{
					the_oldtab = oldtabs.eq( i );
				}

				tab.addClass('tab_counter_'+i).on('mouseover', function()
				{
					open_content(tab, i, the_oldtab);
					return false;
				});

				tab.on('keydown', function(objEvent)
				{
					if (objEvent.keyCode === 13)  // if user presses 'enter'
					{
						tab.trigger('mouseover');
					}
				});

				if(newtabs)
				{
					the_oldtab.on('mouseover', function()
					{
						open_content(the_oldtab, i, tab);
						return false;
					});

					the_oldtab.on('keydown', function(objEvent)
					{
						if (objEvent.keyCode === 13)  // if user presses 'enter'
						{
							the_oldtab.trigger('mouseover');
						}
					});
				}
			});

			set_size();
			trigger_default_open(false);
			win.on("debouncedresize", set_size);

	        $('a').on('mouseover',function(){
	            var hash = $(this).attr('href');
	            if(typeof hash != "undefined" && hash)
	            {
	                hash = hash.replace(/^.*?#/,'');
	                trigger_default_open('#'+hash);
	            }
	        });

			function set_size()
			{
				if( ! options.sidebar)
				{
					return;
				}

				content.css({'min-height': tab_titles.outerHeight() + 1});
			}

			function open_content(tab, i, alternate_tab)
			{
				if(!tab.is('.'+options.active))
				{
					$('.'+options.active, container).removeClass(options.active);
					$('.'+options.active+'_content', container).attr('aria-hidden', true).removeClass(options.active+'_content');

					tab.addClass(options.active);

					var new_loc = tab.data('fake-id');
					if( typeof new_loc == 'string' )
					{
						window.location.replace( new_loc );
					}

					if( alternate_tab )
					{
						alternate_tab.addClass(options.active);
					}

					var active_c = content.eq( i ).addClass(options.active+'_content').attr('aria-hidden', false);

					if(typeof click_container != 'undefined' && click_container.length)
					{
						sidebar_shadow.height(active_c.outerHeight());
					}

					//check if tab title is in viewport. if not scroll up
					var el_offset = active_c.offset().top,
						scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);

					if(win.scrollTop() > el_offset)
					{
						$('html:not(:animated),body:not(:animated)').scrollTop(scoll_target);
					}
				}

				win.trigger( 'av-content-el-height-changed', tab );
			}

			function trigger_default_open(hash)
			{
				if( ! hash && window.location.hash )
				{
					hash = window.location.hash;
				}

				if( ! hash )
				{
					return;
				}

				var open = tabs.filter('[data-fake-id="'+hash+'"]');

				if(open.length)
				{
					if( ! open.is('.active_tab') )
					{
						open.trigger('mouseover');
					}

					window.scrollTo(0, container.offset().top - 70);
				}
			}

		});
	};


}(jQuery));

Custom tab and toggle ID’s for prettier URL hashes

You can edit your toggle or tab item and go to Advanced > Developer Settings and insert your custom ID

Resource

Contributed video:

Tabs Element Tutorial