Tabs

This shortcode has additional styles available in Shortcodes Ultimate Pro

Tab nameTab nameTab name
Tab content
Tab content
Tab content
Tab nameTab nameTab name
Tab content
Tab content
Tab content
Tab nameTab nameTab name
Tab content
Tab content
Tab content
Get the code 
[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]

[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]

[su_tabs style="modern-blue"]
[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]

Table of contents

  1. Description
  2. Options
    1. [su_tabs] – container
    2. [su_tab] – single tab
  3. If tabs don’t work
  4. Related articles

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

styleTabs style

Possible values:
default
carbon
sharp
grid
wood
fabric
modern-dark
modern-light
modern-blue
modern-orange
flat-dark
flat-light
flat-blue
flat-green

Default value: default

To use a style other than default, you need install the Additional Skins add-on.
activeSelect which tab is open by default

Possible values: Number from 1 to 100

Default value: 1
verticalAlign tabs vertically

Possible values: yes or no

Default value: no
mobileThis option controls how shortcode will look and function on mobile devices.

Default value: stack
anchor_in_urlThis option specifies whether an anchor will be added to page URL after clicking a tab

Possible values: yes or no

Default value: no
scroll_offsetThis option defines the top offset when the element is scrolled in. Can be useful along with the fixed site header.

Possible values: number from 0 to 2000

Default value: 0
classAdditional CSS class name(s) separated by space(s)

[su_tab] – single tab

titleTab title

Default value: Tab name
disabledIs this tab disabled

Possible values: yes or no

Default value: no
anchorYou can use a unique anchor for each tab to access it with hash in page URL. For example: use the word Hello and then use a URL like http://example.com/page-url#Hello. This tab will be opened and scrolled in
urlLink tab to any webpage. Use full URL to turn the tab title into link
targetChoose how to open the custom tab link

Default value: blank
classAdditional CSS class name(s) separated by space(s)

If tabs don’t work

If the shortcode doesn’t work, tabs aren’t clickable, chances are you have a JavaScript error on your page. Read this to learn how to fix it.

Helpful?
🤝 Thank you!