or tags that might have appeared._
```
[tabby title="First Tab"]
This is the content of the first tab.
[tabby title="Second Tab"]
This is the content of the second tab. This is the content of the second tab.
[tabby title="Third Tab"]
This is the content of the third tab. This is the content of the third tab. This is the content of the third tab.
[tabbyending]
```
_note: To prevent stray paragraph tags being introduced by WordPress’s wpautop filter,
ensure that there is a blank line above and below each tabby shortcode and the tabbyending
shortcode._
You can see the tabs on the [demo page](https://cubecolour.co.uk/tabby-responsive-tabs/).
You can add the shortcodes to a page made using the WordPress block editor by using
WordPress’s shortcode block.
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](https://cubecolour.co.uk/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 to that copy as required. If you do this you will also
need to prevent the built-in styles from loading by going to the admin page at
settings => tabby and unchecking the “Include the default tabby stylesheet” checkbox.
#### 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 tab to be open by default when the
page first loads, you can add the parameter & value **open=”yes”** to the shortcode
for that tab:
```
[tabby title="My Tab" open="yes"]
```
If you use the ‘open’ shortcode parameter in one of your tab shortcodes, ensure
that you only add it to single tab as having more than one tab open within a tab
group is not supported.
**Icon**
The markup required to show an icon alongside a tab title can be added by using
the **‘icon’** attribute. Tabby responsive tabs does not add the icon files, you
will also need to use a theme or plugin (such as the tabby responsive tabs customiser
add-on) to add the icon files:
```
[tabby title="My Tab" icon="cog"]
```
This adds a pseudo element before the tab title 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](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/)
plugin can be used to add the Font Awesome files required to display the icons in
the tab titles.
**Class**
This allows a custom class to be added to each tab and tab content area. The class
added to the tab will be the value of the class parameter and the class of the tab
content area associated with that tab will be the class with the ‘-content’ suffix.
#### Controlling which tab is open when linking to the page
You can use a ‘target’ URL parameter in your link to set which tab will be open
when the page initially loads. The value of this parameter is based on the tab title
specified in the tabby shortcode which built the tab, but formatted with punctuation&
special characters removed, accents removed, and with dashes replacing the spaces.
If you want to link to a ‘contacts’ page with a tab titled ‘Phone Numbers’ open,
the url you use to link to this page would look like:
```
yoursite.com/contact/?target=phone-numbers
```
If you want a tab with the title ’email addresses’ to be open, the url would look
like:
```
yoursite.com/contact/?target=email-addresses
```
If you want a tab with the title ‘entrées’ to be open (with an acute accent over
the second e), the url would look like:
```
yoursite.com/contact/?target=entrees
```
Using a target url parameter will override any open shortcode parameters used.
## Capturas de pantalla
* [[
* On a desktop browser the content is displayed within tabs.
* [[
* When the browser width is below the size set in the media query, the tabs are
replaced by an accordion.
* [[
* The basic print styles are intended to present the tab titles & content appropriately
when printed out.
## Instalación
1. Upload the Tabby Responsive Tabs plugin folder to your ‘/wp-content/plugins/’ directory
2. Activa el plugin a través del menú ‘Plugins’ en WordPress
## FAQ
### Why isn’t it working for me?
There are a few things you can investigate when troubleshooting any plugin which
is not working as expected:
**Incorrectly formed shortcodes**
If you copied & pasted in the Tabby Responsive
Tabs shortcodes from a web page showing an example usage rather than directly typing
them into the page, it is possible that there may be invisible or invalid characters
in the shortcode text, or the shortcodes are enclosed within code tags. Correct
this by deleting the shortcodes and type them directly instead.
**Plugin or theme conflicts**
To troubleshoot whether a plugin or theme is conflicting
with the Tabby Responsive Tabs plugin on your site, install the [health check and troubleshooting plugin](https://wordpress.org/plugins/health-check/)
and use the troubleshooting mode.
_If the plugin isn’t working for you_, please read the documentation carefully to
check whether your issue is covered. Then review the topics in the [plugin support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/).
You may find an appropriate solution outlined in a resolved topic if someone previously
posted the same or a similar issue. If you do not find an answer that enables you
to solve your issue, please post a new topic on the forum so we have an opportunity
to get it working before you consider leaving a review.
### What levels of support are available?
You can receive free support for the plugin if you have problems getting it working.
To access this please open a new topic on the [plugin support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/)
all communication must take place on the forum for free support.
Please note that CSS support for customization of the tab display is not within
the scope of the free support that can be provided.
If you require a greater level of support than can be provided on the plugin support
forum on WordPress.org – eg you prefer not to post the url, or if you require CSS
support to change how your tabs appear on your site, you can request non-free support
via the [paid email support form for cubecolour plugins](https://cubecolour.co.uk/premium-support/)
form.
### How can I remove extra paragraph tags which appear at the beginning or end of the tab content?
These extra tags are often be added by WordPress’s wpautop function. It is recommended
to leave a blank line before and after each tabby shortcode to prevent these from
appearing.
### Pasted-in shortcodes aren’t working or the tabs have a ‘stepped’ appearance
If you are copying & pasting the example shortcodes into the visual editor and the
shortcodes don’t seem to be working or the tabs appear in a stepped configuration,
look at the page in the text editor to be sure that you aren’t adding in any extra
markup that isn’t visible in the visual editor. Delete any opening and closing <
pre> and/or tags pairs surrounding the tab shortcodes. (this would apply
to any plugin using shortcodes).
### I am using custom styles in my theme, how do I ensure the default tabby stylesheet is not loaded?
In your your WordPress admin, go to settings -> tabby and uncheck the “Include the
default tabby stylesheet” checkbox.
### Where is the plugin’s admin page?
The admin page is at settings => tabby.
If you want to be able to customise the tabs without editing code, the [Tabby Responsive Tabs Customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/)
is available, and provides options to customise how the tabs display.
### Does it work with a multisite installation of WordPress?
Sí
### How can I change the colours?
The recommended method for experienced developers to customise how the tabs display
is to copy the css rules from the plugin’s stylesheet into the child theme’s stylesheet
and then customise the colours and other CSS as required. When using customised
version of the plugin’s styles in the child theme, you should also prevent the plugin’s
default built-in styles from loading by going to settings -> tabby in your WordPress
admin, and uncheck the “Include the default tabby stylesheet” checkbox.
If you prefer to use a settings page in your WordPress admin to set a custom tab
style, you can use the [Tabby Responsive Tabs Customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/)
which contains several tab style presets which can be further customised with a
comprehensive set of easy to set options. The customiser plugin was designed to
be easy for non-developers to use to customise how the tabs display.
### Can I change the responsive breakpoint from the default 767px?
Yes, you can see where that is set in the plugin’s CSS. Refer to the answer above
about using custom css to use a custom value.
This value can also be set using the Tabby Responsive Tabs Customiser plugin’s admin
panel.
### How can I get rid of unmatched opening or closing paragraph tags in the tabs making my markup invalid?
This can be caused by WordPress’s wpautop filter being applied to the post/page
content. To prevent stray paragraph tags appearing, leave a blank line before and
after each shortcode.
### Can I display multiple tab groups on a single page?
Yes you can have as many sets of tabs as you like.
### Can I include tabs in my sidebar?
It is possible to include tabs within a text widget if you have added shortcode
support to text widgets by adding the filter below to your child theme’s functions.
php or a custom functionality plugin.
```
add_filter('widget_text', 'do_shortcode');
```
This filter will enable you to use any shortcodes within text widgets.
### Can I nest a Tag Group within an existing tab?
No, this is not supported.
### Can I specify which tab is open when the page initially loads?
Yes, see the documentation for the ‘open’ shortcode parameter for details.
### Can I specify which tab is open from a link pointing to the page
Yes, see the documentation for the usage of a ‘target’ URL parameter in the link.
### I want to use a custom class for my icons without the font-awesome prefixes
You can do this by using an ‘ico’ parameter instead of the ‘icon’ parameter in the
shortcode.
### Can you create a customised stylesheet for me to fit in with the colours or style of my website?
Site-specific customisation work is beyond of the scope of the free support. You
can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/)
add-on plugin or you can commission a custom plugin which provides custom tab styes
specific to your site. This is a paid service, for a quote please send a message
via the [cubecolour contact form](https://cubecolour.co.uk/contact/)
Plugin support for Tabby Responsive Tabs is provided at the [plugin’s support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/)
on WordPress.org.
### Why can’t I get the Target Parameter to Work?
This is used just like any other URL parameter in a query string so you need to
use a valid structure for the query string.
If there’s already a parameter in a query string, including the one included in
the url when not using ‘pretty’ permalinks, subsequent parameters must be appended
using an ampersand.
eg:
```
yoursite.com/?page_id=1&target=phone-numbers
```
### How can I use the target parameter on a link on the same page as the tabgroup without the page reloading?
This is not possible with the target parameter, however this can be achieved by
using the optional [Tabby link to tab plugin](https://cubecolour.co.uk/downloads/tabby-link-to-tab/)
### How will the tabs print?
Basic print styles are included. This is designed to print the tab titles and content
in series.
### Are there any other free cubecolour plugins?
If you like Tabby Responsive Tabs, you may like some of my other plugins in the
WordPress.org plugins directory. These are listed on my [profile](https://profiles.wordpress.org/numeeja/)
page under the ‘plugins’ tab.
### Who or what is cubecolour?
My name is Michael Atkins. Cubecolour is the name of my web design and development
business in South London where I work with businesses, organisations and individuals
to build and support their websites using WordPress. I enjoy attending local WordCamps
and WordPress meetups. I have used WordPress since 2007 and I am a moderator on
the WordPress.org support forums. When I’m not sitting in front of my MacBook I
can usually be found playing bass, guitar or ukulele.
### Why do you spell the word ‘color’ incorrectly?
I don’t, I’m from England and ‘colour’ is the correct spelling.
### I am using the plugin and love it, how can I show my appreciation?
You can donate any amount via [my donation page](https://cubecolour.co.uk/wp/) or
you could purchase a copy of the [Tabby responsive tabs customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/).
If you find Tabby responsive tabs useful, I would also appreciate a review on the
[plugin review page](https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs/)
### Is the Tabby responsive tabs customiser plugin a Premium or Pro version of Tabby responsive tabs?
No, Tabby responsive tabs works great on its own and customising how the tabs display
should be straightforward for anyone comfortable with editing a child theme. The
Tabby Responsive Tabs Customiser plugin is an add-on which is designed to be useful
for anyone who wants an easy way to customise how their tabs display without touching
any code.
### What is the Tabby link to tab plugin?
Tabby link to tab is an optional add-on for Tabby responsive tabs which provides
a simple shortcode to create links to specific tabs which can appear anywhere on
the same page as the tabgroup. When this is used, the tab becomes active without
the page reloading. This add-on is not required in most cases but can be useful
if you want to include links to specific tabs within the tab content or in a different
area of the page.
For more details please see: [Tabby link to tab plugin](https://cubecolour.co.uk/downloads/tabby-link-to-tab/).
This add-on was developed after several users requested the functionality.
## Reseñas
### [Clean tabs which are easy to add, but..](https://wordpress.org/support/topic/clean-tabs-which-are-easy-to-add-but/)
[ChrisL](https://profiles.wordpress.org/chrslcy/) 6 de Noviembre de 2025 1 respuesta
Presentation is clean and implementation is relatively simple. But it would be even
better if block functionality were introduced. Using [shortcodes] in the block editor
feels antiquated.
### [Easy, Lightweight and Perfect!](https://wordpress.org/support/topic/easy-lightweight-and-perfect/)
[dinaddd](https://profiles.wordpress.org/dinaddd/) 26 de Enero de 2023
Using simple shortcodes to create a tabs. Too easy to setup and faster! In the setting,
most of their features are not free, but I’m super happy with the default because
it’s enough for what I need. Also, you can create your own design style in your
child them or elsewhere.
### [Excellent plugin!](https://wordpress.org/support/topic/excellent-plugin-8335/)
[gregblocklive](https://profiles.wordpress.org/gregblocklive/) 31 de Diciembre
de 2022
Works great
### [Great!](https://wordpress.org/support/topic/great-15048/)
[KeniVinh](https://profiles.wordpress.org/luong-quang-vinh/) 19 de Noviembre de
2022
Simple and enough to use.
### [This is the best](https://wordpress.org/support/topic/this-is-the-best-45/)
[Alessio Pellegrini](https://profiles.wordpress.org/pointnet/) 4 de Octubre de
2022
This is the best extension to create tabs directly from the page, super easy to
use and customize with a little CSS.
### [Just excellent](https://wordpress.org/support/topic/just-excellent-70/)
[mkearns](https://profiles.wordpress.org/mkearns/) 22 de Marzo de 2022 1 respuesta
Simple, effective and elegant. Does what it says it will and does it well. Only
one very very minor point – it would be great if the shortcode had a parameter for
an extra class, or for an id, to be added to the individual tab containers. Thank
you for building this and releasing it for free. A beverage donation is on it’s
way.
[ Leer los 145 comentarios ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/)
## Colaboradores & Desarrolladores
“Tabby Responsive Tabs” es software de código abierto. Las siguientes personas han
contribuido a este plugin.
Colaboradores
* [ cubecolour ](https://profiles.wordpress.org/numeeja/)
“Tabby Responsive Tabs” ha sido traducido en 1 idioma. Gracias a [los traductores](https://translate.wordpress.org/projects/wp-plugins/tabby-responsive-tabs/contributors)
por sus contribuciones.
[Traduce “Tabby Responsive Tabs” a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/tabby-responsive-tabs)
### ¿Interesado en el desarrollo?
[Revisa el código](https://plugins.trac.wordpress.org/browser/tabby-responsive-tabs/),
echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/tabby-responsive-tabs/),
o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/tabby-responsive-tabs/)
por [RSS](https://plugins.trac.wordpress.org/log/tabby-responsive-tabs/?limit=100&mode=stop_on_copy&format=rss).
## Historial de cambios
#### 1.4.1
* New setting to specify the font awesome icon style
#### 1.4.0
* Added localization and a few translations
#### 1.3.4
* tab titles sanitized with `wp_kses()` to allow line breaks in tab titles
* Sanitize html for tab title element
#### 1.3.3
* Added option to change the tab title element
#### 1.3.1
* Fixed issue with the option value saving
* using target url parameter overrides open shortcode parameter for which tab is
to be open on page load
* Shortcode parameters now used in array, not extracted
* Priority of tabbytrigger can be changed by adding ‘priority’ shortcode parameter
with an appropriate value
* Priority of tabbytrigger changed to 30 by default to prevent breakage on pages
created with gutenberg
* ico shortcode parameter added to enable custom icons to be added without adding
font-awesome prefixes
#### 1.3.0
* using target url parameter overrides open shortcode parameter for which tab is
to be open on page load
* Shortcode parameters now used in array, not extracted
* Priority of tabbytrigger can be changed by adding ‘priority’ shortcode parameter
with an appropriate value
* Priority of tabbytrigger changed to 30 by default to prevent breakage on pages
created with gutenberg
* ico shortcode parameter added to enable custom icons to be added without adding
font-awesome prefixes
#### 1.2.3
* Enable targeting the tab from url query string when the title contains an accent
#### 1.2.2
* Included print stylesheet as a separate file
#### 1.2.1
* Added index.php to prevent the content of plugin directories being viewed if
the site has not had directory browsing disallowed.
#### 1.2.0
* Added basic print styles to default stylesheet
#### 1.1.1
* Improvements to default CSS
* Addition of ‘open’ shortcode attribute to allow tabs other than the first to
be open when the page loads
* First tab now is open by default when displayed as accordion
* Changed links in plugin table
* Get Plugin Version function
* Prevent tabs overlapping if there are too many
* Remove hard coded paragraph tags in tab content & improve
* Added icon font support. Note: Font Awesome needs to be loaded by your theme
or another plugin (including the Tabby Responsive Tabs Customiser)
* Added functionality to allow target url parameter to control which tab is open
on page load.
#### 1.0.3
* improved theme compatibility with default css
#### 1.0.2
* enqueue plugin js only when needed
* css for improved specificity
#### 1.0.1
* Updated js & css
#### 1.0.0
* Initial Version
## Meta
* Versión **1.4.1**
* Última actualización **hace 8 meses**
* Instalaciones activas **10,000+**
* Versión de WordPress ** 4.9 o superior **
* Probado hasta **6.8.5**
* Versión de PHP ** 5.6 o superior **
* Idiomas
* [English (US)](https://wordpress.org/plugins/tabby-responsive-tabs/) y [German](https://de.wordpress.org/plugins/tabby-responsive-tabs/).
* [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/tabby-responsive-tabs)
* Etiquetas
* [Accordion](https://cl.wordpress.org/plugins/tags/accordion/)[responsive](https://cl.wordpress.org/plugins/tags/responsive/)
[shortcode](https://cl.wordpress.org/plugins/tags/shortcode/)[tab](https://cl.wordpress.org/plugins/tags/tab/)
[tabs](https://cl.wordpress.org/plugins/tags/tabs/)
* [Vista Avanzada](https://cl.wordpress.org/plugins/tabby-responsive-tabs/advanced/)
## Calificaciones
4.9 de 5 estrellas.
* [ 136 valoraciones de 5 estrellas ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/?filter=5)
* [ 5 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/?filter=4)
* [ 2 valoraciones de 3 estrellas ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/?filter=3)
* [ 0 valoraciones de 2 estrellas ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/?filter=2)
* [ 1 valoración de 1 estrellas ](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/#new-post)
[Ver todas las reseñas](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/)
## Colaboradores
* [ cubecolour ](https://profiles.wordpress.org/numeeja/)
## Soporte
Problemas resueltos en los últimos dos meses:
1 de 1
[Ver el foro de soporte](https://wordpress.org/support/plugin/tabby-responsive-tabs/)
## Donar
¿Te gustaría apoyar el avance de este plugin?
[ Donar para este plugin ](https://cubecolour.co.uk/wp)