Horizontal tabs

Tab nameTab nameTab name
Tab content
Tab content
Tab content
<strong>Horizontal tabs</strong>

[su_tabs]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[/su_tabs]

Vertical tabs

Tab nameTab nameTab name
Tab content
Tab content
Tab content
<strong>Vertical tabs</strong>

[su_tabs vertical="yes"]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[/su_tabs]

There are Additional Skins available for this shortcode.

Description

This shortcode allows you to divide your content with horizontal or vertical tabs. You can specify which tab will be selected by default and turn any tab into a link. You can use any HTML code or even other shortcodes as content.

Options

[su_tabs] – container

Option namePossible valuesDefault value
style
Choose style for this tabs
default (Default)
carbon (Carbon)
sharp (Sharp)
grid (Grid)
wood (Wood)
fabric (Fabric)
modern-dark (Modern: Dark)
modern-light (Modern: Light)
modern-blue (Modern: Blue)
modern-orange (Modern: Orange)
flat-dark (Flat: Dark)
flat-light (Flat: Light)
flat-blue (Flat: Blue)
flat-green (Flat: Green)
default
active
Select which tab is open by default
Number from 1 to 1001
vertical
Align tabs vertically
yes or nono
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

[su_tab] – single tab

Option namePossible valuesDefault value
title
Tab title
Any text valueTab name
disabled
Is this tab disabled
yes or nono
anchor
You can use unique anchor for this tab to access it with hash in page url. For example: use Hello and then navigate to url like http://example.com/page-url#Hello. This tab will be activated and scrolled in
Any text value– none –
url
Link tab to any webpage. Use full URL to turn the tab title into link
Any text value– none –
target
Choose how to open the custom tab link
self (Open in same tab)
blank (Open in new tab)
blank
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –