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
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
Resource
Contributed video: