WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Tabby Responsive Tabs

Enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor.

  • Adds a set of horizontal tabs which changes to an accordion on narrow viewports
  • Tabs and accordion are created with jQuery
  • Supports multiple sets of tabs on same page
  • Uses Semantic header and Content markup
  • Aria attributes and roles aid screen reader accessibility
  • Tabs and content are accessible via keyboard

Tabby Responsive Tabs Customiser Add-on Plugin

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.

Usage:

There are two shortcodes which should both be used [tabby] and [tabbyending]

[tabby title="tabname"]

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.

Add a [tabbyending] shortcode after the content of the last tab in a tabgroup.

Example

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

  1. 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.

  2. 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); ?>

Additional Shortcode attributes

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.

Controlling which tab is open depending on the link

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:

yoursite.com/contact/?target=phone-numbers

and if you want a tab with the title 'email addresses' to be open, the url would look like:

yoursite.com/contact/?target=email-addresses

Requires: 3.7 or higher
Compatible up to: 3.9.1
Last Updated: 2014-7-4
Downloads: 14,372

Ratings

4 stars
5 out of 5 stars

Support

21 of 21 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
0 people say it's broken.

100,2,2
100,2,2
100,2,2 100,3,3
100,1,1
80,5,4
50,4,2 100,1,1
100,2,2 100,1,1