Tab Section

Overview

Tab section element is easy to setup from the advanced layout editor and displays the content and tabs in various styles (like text only, with the image, with an icon, above or below the tab section, etc). Tab element is a full-width section and hence if a sidebar exists on the page it will be pushed below.

Click here for more examples of Tab section.

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

Shortcode

[av_tab_section transition='av-tab-no-transition' padding='default' tab_pos='av-tab-above-content' content_height='' tab_padding='default' initial='1' id='' av_element_hidden_in_editor='0' av_admin_tab_active='1' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-uzv2e']
[av_tab_sub_section av_uid='av-qns8m'][/av_tab_sub_section][av_tab_sub_section av_uid='av-l7tge'][/av_tab_sub_section][av_tab_sub_section av_uid='av-h0y4m'][/av_tab_sub_section][av_tab_sub_section av_uid='av-7ypj2'][/av_tab_sub_section]
[/av_tab_section]

Customization

Tab Icons

Tab icon size:

/* CSS - Tab icon size*/
span.av-tab-section-icon:before {
font-size: 76px!important;
}

Tab Styles

Tab font slyles:

/* CSS - Tab font slyles */
.av-inner-tab-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .5em;
    line-height: 24px;
}

Tab font slyle on hover:

/* CSS - Tab font slyle on hover */
.av-inner-tab-title:hover {
    color: black;
}

Active tab font slyle:

/* CSS - Active tab font slyle */
.av-active-tab-title {
background:gold;
}

Tabs with equal space: Tabs are spread out across the width and share equal space between them.

/* CSS - Tabs with equal space*/
.js_active .av-tab-section-tab-title-container { 
    display: flex!important;
    justify-content: space-around;
}

Tab Shapes

To create pill shape tabs, give your tabs section element a custom CSS class name “av-pill-tabs” and add the below CSS to your site.

/*----------------------------------------
// CSS - Tabs pill shape
//--------------------------------------*/

    .av-pill-tabs .av-tab-section-tab-title-container a {
        background: #1869ff;
        border-radius: 50px;
        padding: 0!important;
        margin-top: -10px;
        overflow: hidden;
    }

    #top .av-pill-tabs .av-section-tab-title {
        margin-right: 60px!important;
        padding: 0!important;
    }

    .av-pill-tabs .av-outer-tab-title {
        padding: 0px!important;
        margin: 0 !important;
    }

    /* Tab Title */
    .av-pill-tabs .av-inner-tab-title {
        color: #FFF;
        margin-bottom: 0px!important;
        line-height: .2em;
        padding: 15px 0 5px 0!important;
    }

    /* Tab arrow */
    .av-pill-tabs .av-tab-arrow-container {
        top: 5px;
    }
    #top .av-pill-tabs .av-tab-arrow-container span {
        background: gold;
    }

To change the tabs shape to circle or round, please give your tab section element a custom CSS class name “av-round-tabs” and add the below CSS code in your site:

    /*----------------------------------------
// CSS - Tabs round shape
//--------------------------------------*/
.av-round-tabs .av-tab-section-tab-title-container a {
	background:#1869ff;
	border-radius:90px;
	padding:0!important;
	margin-top:-10px;
	overflow: hidden;
	width: 90px;
	height: 90px;
}

#top .av-round-tabs .av-section-tab-title {
	margin-right:60px!important;
	padding:10px 0!important;
} 

/* Tab Title */
.av-round-tabs .av-inner-tab-title {
    color: #FFF;
    line-height: 1em;
}

/* Tab arrow */
.av-round-tabs .av-tab-arrow-container {
    top: 10px;
}
#top .av-round-tabs .av-tab-arrow-container span {
    background: gold;
}

Tab Animation

Add custom animation to tab text or icons:

/*----------------------------------------
// CSS - Tab Animation
//--------------------------------------*/
.av-section-tab-title.av-active-tab-title {
animation: shakeMe 0.250s linear 1;
-webkit-animation: shakeMe 0.250s linear 1;
-moz-animation: shakeMe 0.250s linear 1;
-o-animation: shakeMe 0.250s linear 1;
-ms-animation: shakeMe 0.250s linear 1;
}

/* Animation Effect */

@keyframes shakeMe {
25% {
transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg);
-moz-transform: rotateZ(15deg);
-o-transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
}
50% {
transform: rotateZ(-15deg);
-webkit-transform: rotateZ(-15deg);
-moz-transform: rotateZ(-15deg);
-o-transform: rotateZ(-15deg);
-ms-transform: rotateZ(-15deg);
}
100% {
transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg);
-moz-transform: rotateZ(15deg);
-o-transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
}}

Remove the Grayscale from the inactive tab

Remove greyscale effect from inactive tab icons/images.

/*-------------------------------------------------------------
// CSS - Remove greyscale from inactive tabs
//------------------------------------------------------------*/
.av-tab-section-image {
    filter: none!important;
}

Increase the tab spacing

Increase the space between tabs

/*------------------------------
// CSS - Increase tab spacing
//------------------------------*/
#top .av-section-tab-title {
    padding-right:60px!important;
}

Link to a specific tab on the tab section

When a link is clicked if you like to direct the user to a specific tab section it is possible by using a tab section ID in the URL as shown below:

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

Resource

Contributed video: