Enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor.
For a simple way to customise the display of your tabs, you can now purchase the Tabby Responsive Tabs Customiser add-on plugin. This adds a settings panel for Tabby Responsive Tabs so you can create a unique style for your tabs without editing any code. This also provides several one-click style presets and allows you to load the files required to add icons to your tab titles.
There are two shortcodes which should both be used
replace tabname with the name of your tab.
Add the tab content after that. It is recommended to leave a blank line before and after each tabby shortcode.
[tabbyending] shortcode after the content of the last tab in a tabgroup.
[tabby title="First Tab"] Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me. [tabby title="Second Tab"] Lay down in your way catnip stuck in a tree, sunbathe kittens. [tabby title="Third Tab"] sleep in the sink climb the curtains attack, give me fish. [tabbyending]
You can see the tabs on the demo page.
If you want to change how the tabs and accordion display on your site, you have two options:
Use the Tabby Responsive Tabs Customiser plugin which provides a very easy way to customise the display of your tabs without needing to edit any code.
Copy the contents of the plugin's stylesheet into your child theme or custom styles plugin and make the changes. You also need to prevent the built-in styles from loading by adding the following line to your child theme's functions.php or a custom functionality plugin:
<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>
Open The first (leftmost) tab panel will be open by default in 'tab view' and in 'accordion view'.
If you want a specific tab other than the first to be open by default when the page first loads, you can add the attribute open="yes" to the shortcode for that tab:
[tabby title="My Tab" open="yes"]
Icon You can add the markup required to show an icon alongside a tab title by using the 'icon' attribute. You will need to use a theme or plugin to add the icon files:
[tabby title="My Tab" icon="cog"]
This adds a pseudo element before the tab table with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
The Tabby Responsive Tabs Customiser plugin can be used to add the required Font Awesome files for you.
You can use a 'target' URL parameter to set which tab will be open. The value of this parameter is based on tab title specified in the tabby shortcode with punctuation & special characters removed and with spaces replaced by dashes.
If you want to link to a 'contacts' page with a tab titled 'Phone Numbers' open, the url you use in link to this page would look like:
and if you want a tab with the title 'email addresses' to be open, the url would look like:
Requires: 3.7 or higher
Compatible up to: 3.9.1
Last Updated: 2014-7-4
21 of 21 support threads in the last two months have been resolved.
Got something to say? Need help?