{"id":33926,"date":"2019-03-04T08:48:31","date_gmt":"2019-03-04T08:48:31","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33926"},"modified":"2022-08-03T07:24:22","modified_gmt":"2022-08-03T07:24:22","slug":"tabs","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/tabs\/","title":{"rendered":"Tabs"},"content":{"rendered":"\n

This shortcode has additional styles available in Shortcodes Ultimate Pro<\/a><\/p>\n\n\n

\n\t
\n\t\t
\n
Tab name<\/span>Tab name<\/span>Tab name<\/span><\/div>\n
\n
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div>\n<\/div>\n<\/div>\n
\n
Tab name<\/span>Tab name<\/span>Tab name<\/span><\/div>\n
\n
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div>\n<\/div>\n<\/div>\n
\n
Tab name<\/span>Tab name<\/span>Tab name<\/span><\/div>\n
\n
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t
\n\t\tGet the code<\/summary>\n\t\t
"Tab<\/span>"Tab<\/span>"Tab<\/span><\/div>
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div><\/div><\/div>\n\n
"Tab<\/span>"Tab<\/span>"Tab<\/span><\/div>
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div><\/div><\/div>\n\n
"Tab<\/span>"Tab<\/span>"Tab<\/span><\/div>
Tab content<\/div>\n
Tab content<\/div>\n
Tab content<\/div><\/div><\/div><\/pre>\n\t<\/details>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a>
    1. <\/div>
      <\/div><\/div> \u2013 container<\/a><\/li>
    2.  \u2013 single tab<\/a><\/li><\/ol><\/li>
    3. If tabs don’t work<\/a><\/li>
    4. Related articles<\/a><\/li><\/ol><\/li><\/ol>\n\n\n
      Description<\/h2>\n\n\n\n
      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.<\/p>\n\n\n\n
      Options<\/h2>\n\n\n\n
      Tab title<\/span><\/div>
      <\/div><\/div><\/div> \u2013 container<\/h3>\n\n\n\n
      style<\/a><\/td>Tabs style

      Possible values:<\/strong>
      default<\/code>
      carbon<\/code>
      sharp<\/code>
      grid<\/code>
      wood<\/code>
      fabric<\/code>
      modern-dark<\/code>
      modern-light<\/code>
      modern-blue<\/code>
      modern-orange<\/code>
      flat-dark<\/code>
      flat-light<\/code>
      flat-blue<\/code>
      flat-green<\/code>

      Default value:<\/strong> default<\/code>

      To use a style other than default<\/code>, you need install the Additional Skins<\/a> add-on.<\/td><\/tr>
      active<\/a><\/td>Select which tab is open by default

      Possible values:<\/strong> Number from 1 to 100

      Default value:<\/strong> 1<\/code><\/td><\/tr>
      vertical<\/a><\/td>Align tabs vertically

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      mobile<\/a><\/td>This option controls how shortcode will look and function on mobile devices.

      Default value:<\/strong> stack<\/code><\/td><\/tr>
      anchor_in_url<\/a><\/td>This option specifies whether an anchor will be added to page URL after clicking a tab

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      scroll_offset<\/td>This option defines the top offset when the element is scrolled in. Can be useful along with the fixed site header.

      Possible values:<\/strong> number from 0<\/code> to 2000<\/code>

      Default value:<\/strong> 0<\/code><\/td><\/tr>
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
       \u2013 single tab<\/h3>\n\n\n\n
      title<\/a><\/td>Tab title

      Default value:<\/strong> Tab name<\/code><\/td><\/tr>
      disabled<\/a><\/td>Is this tab disabled

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      anchor<\/a><\/td>You 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<\/td><\/tr>
      url<\/a><\/td>Link tab to any webpage. Use full URL to turn the tab title into link<\/td><\/tr>
      target<\/a><\/td>Choose how to open the custom tab link

      Default value:<\/strong> blank<\/code><\/td><\/tr>
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      If tabs don’t work<\/h2>\n\n\n\n
      If the shortcode doesn’t work, tabs aren’t clickable, chances are you have a JavaScript error on your page. Read this<\/a> to learn how to fix it.<\/p>\n\n\n\n
      Related articles<\/h2>\n\n\n\n