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_aviajs() {
   wp_dequeue_script( 'avia-shortcodes' );
   wp_enqueue_script( 'avia-shortcodes-child', get_stylesheet_directory_uri().'/js/shortcodes.js', array('jquery'), 3, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 100 ); 

Custom tab and toggle ID’s for prettier URL hashes

Adds field for custom tab and toggle ids for prettier url #hashes.

add_theme_support('avia_template_builder_custom_tab_toogle_id');

Resource

Contributed video:

Tabs Element Tutorial