Squelch Tabs and Accordions Shortcodes

Welcome to the official home page of the Squelch Tabs and Accordions Shortcodes project.

Squelch Tabs and Accordions Shortcodes provides shortcodes for adding stylish Web 2.0 style accordions and tabs to your WordPress website: Horizontal accordions, vertical accordions and tabs.

After you have installed the plugin you can use simple shortcodes on any page or post to add tabs or accordions.

Tabs and accordions can help to improve your website in a number of ways:

  • Add interactivity: With collapsible accordions and tabs, you can make better use of the available space on the page.
  • Add style: Tabs and accordions can help make your site look more professional and better polished than other sites.
  • Save space: Tabs and accordions can save a lot of space on the page making your website look less cluttered.
  • Separating content: Showing content only when required while the rest remains invisible dividing the content into parts.

If you want to add more interactivity with tabs, vertical and horizontal accordions on your WordPress website, Squelch Tabs and Accordions Shortcodes is a good option.

Shortcodes Documentation

[tabs] Usage


[tabs title="" disabled="false" collapsible="true" active="0" event="click"] [tab title="Tab 0"]Tab 0 content[/tab] [tab title="Tab 1"]Tab 1 content[/tab] [tab title="Tab 2"]Tab 2 content[/tab] ... [/tabs]

[tabs] Parameters:

title
(text) The title shown above the tab group

Default: “” (empty string)

disabled
(boolean) If true the tabs will be disabled

Default: false

collapsible
(boolean) If true, clicking the active tab will collapse the content into the tab bar similar to an accordion

Default: false

active
(integer) Index of the tab that should be selected on page load with the left-most tab being 0

Default: 0

event
(text) What event should trigger the tab: mouseover or click

Default: click

As of the 0.2 release the shortcodes [subtabs] and [subsubtabs] are aliases of [tabs] which allows nesting of tabs in tabs. This is necessary as WordPress does not handle nested shortcodes of the same kind correctly.

[tab] Usage:


[tabs title="" disabled="false" collapsible="true" active="0" event="click"] [tab title="Tab 0"]Tab 0 content[/tab] [tab title="Tab 1"]Tab 1 content[/tab] [tab title="Tab 2"]Tab 2 content[/tab] ... [/tabs]

[tab] Parameters:

title
(text) The title shown on the tab

Default: ”       ” (7 spaces)

icon
(url) Link to an icon to show on the left hand side of the tab

Default: “” (no icon)

iconalt
(text) The alt text to add to the icon (for screen readers and search engines)

Default: Title of the tab

iconw
(integer) Width of the icon

Default: Width not explicitly set, let browser size image automatically

iconh
(integer) Height of the icon

Default: Height not explicitly set, let browser size image automatically

As of the 0.2 release the shortcodes [subtab] and [subsubtab] are aliases of [tab] which allows nesting of tabs in tabs. This is necessary as WordPress does not handle nested shortcodes of the same kind correctly.

Demo

Tab 0 content
Tab 1 content
Tab 2 content

[accordions] Usage


[accordions title="" disabled="false" active="0" autoheight="false" collapsible="true"] [accordion title="Pane 0"]Accordion pane 0 content[/accordion] [accordion title="Pane 1"]Accordion pane 1 content[/accordion] [accordion title="Pane 2"]Accordion pane 2 content[/accordion] ... [/accordions]

[accordions] Parameters:

title
(text) The title shown above the accordion group

Default: “” (empty string)

disabled
(boolean) Disables or enables the accordion

Default: false

active
(integer|boolean) Index of the active pane. Set to false to collapse all panes on page load

Default: false

autoheight
(boolean) Makes all panes the same height, based on the longest pane, to make animations smoother

Default: false

collapsible
(boolean) Whether all panes can be closed at once

Default: true

[accordion] Usage


[accordions title="" disabled="false" active="0" autoheight="false" collapsible="true"] [accordion title="Pane 0"]Accordion pane 0 content[/accordion] [accordion title="Pane 1"]Accordion pane 1 content[/accordion] [accordion title="Pane 2"]Accordion pane 2 content[/accordion] ... [/accordions]

[accordion] Parameters:

title
(text) The title for this pane

Default: ”      ” (6 spaces)

Demo

Pane 0

Accordion pane 0 content

Pane 1

Accordion pane 1 content

Pane 2

Accordion pane 2 content

[haccordions] Usage


[haccordions title="" width="800" height="320" hwidth="28" activateon="click" active="0" speed="800" autoplay="false" pauseonhover="true" cyclespeed="6000" theme="jqueryui" rounded="false" enumerate="false"] [haccordion title="Pane 0"]Accordion pane 0 content[/haccordion] [haccordion title="Pane 1"]Accordion pane 1 content[/haccordion] [haccordion title="Pane 2"]Accordion pane 2 content[/haccordion] ... [/haccordions]

[haccordions] Parameters:

title
(text) The title shown above the accordion group

Default: “” (empty string)

width
(integer) Width of the haccordion in px

Default: 960

height
(integer) Height of the haccordion in px

Default: 320

hwidth
(integer) Width of each header (vertical bars) in px

Default: 28 (jqueryui theme) or 48 (all other themes)

activateon
(text) “click” or “mouseover”: Which user input triggers opening of slides

Default: “click”

active
(integer) Index of the pane that should be selected on page load with the left-most pane being 0

Default: 0

speed
(integer) Duration of animation in ms

Default: 800

autoplay
(boolean) Set to true to automatically scroll through slides

Default: false

pauseonhover
(boolean) If true the autoplay will be paused when the mouse is in the haccordion

Default: true

cyclespeed
(integer) Time between opening each slide (when autoplay is true)

Default: 6000

theme
(text) One of: jqueryui, basic, dark, light or stitch

Default: “jqueryui”

basic, dark, light and stitch are the themes that liteAccordion and Accordion Pro use.

rounded
(boolean) Set to true to round the corners of the haccordion

Default: false

enumerate
(boolean) If true the slide number will be shown in each slide

Default: false

[haccordion] Usage


[haccordions title="" width="800" height="320" hwidth="28" activateon="click" active="0" speed="800" autoplay="false" pauseonhover="true" cyclespeed="6000" theme="jqueryui" rounded="false" enumerate="false"] [haccordion title="Pane 0"]Accordion pane 0 content[/haccordion] [haccordion title="Pane 1"]Accordion pane 1 content[/haccordion] [haccordion title="Pane 2"]Accordion pane 2 content[/haccordion] ... [/haccordions]

[haccordion] Parameters:

title
(text) The title for this pane

Default: ”      ” (6 spaces)

Demo

  1. Pane 0

    Accordion pane 0 content
  2. Pane 1

    Accordion pane 1 content
  3. Pane 2

    Accordion pane 2 content

More horizontal accordion demos

[toggles] Usage


[toggles title="" speed="800" active="0,2" theme="jqueryui"] [toggle title="Pane 0"]Toggle pane 0 content[/toggle] [toggle title="Pane 1"]Toggle pane 1 content[/toggle] [toggle title="Pane 2"]Toggle pane 2 content[/toggle] [/toggles]

[toggles] Parameters:

title
(text) The title shown above the toggle group

Default: “” (6 spaces)

speed
(integer) Length in ms, duration the animation should last for

Default: 800

active
(integer(s), comma-separated) Which pane(s) of the toggle should be active on page load, comma-separated

Default: false (all panes collapsed)

theme
(string) The theme to apply to the toggle: blank, jqueryui, basic, dark, light, stitch.

Default: “jqueryui”

style
(string) DEPRECATED: Alias for ‘theme’, provided for compatibility with TheThe Tabs and Accordions

Default: “jqueryui”

[toggle] Usage


[toggles title="" speed="800" active="0,2" theme="jqueryui"] [toggle title="Pane 0"]Toggle pane 0 content[/toggle] [toggle title="Pane 1"]Toggle pane 1 content[/toggle] [toggle title="Pane 2"]Toggle pane 2 content[/toggle] [/toggles]

[toggle] Parameters:

title
(text) The title for this pane

Default: ”      ” (6 spaces)

Demo

Pane 0

Toggle pane 0 content

Pane 1

Toggle pane 1 content

Pane 2

Toggle pane 2 content

Upgrading from TheThe Tabs and Accordions

The plugin is intended as, more or less, a drop-in replacement for TheThe Fly’s Tabs and Accordions plugin. This plugin recently stopped working, and then vanished from the WordPress plugins directory. A lot of people were left stranded and looking for a replacement. No easy options were available. This plugin is intended to make it easy to transition from TheThe Fly’s TheThe Tabs and Accordions plugin to a newer, actively maintained plugin.

The upgrade from TheThe Tabs and Accordions is straightforward: Simply deactivate TheThe Tabs and Accordions, then install and activate Squelch Tabs and Accordions Shortcodes.

TheThe Fix

If you’ve followed my advice in the past to create a temporary fix for TheThe Fly’s TheThe Tabs and Accordions plugin, then you will have some code in your functions.php file which will fix your website onto jQuery 1.8.3. This fix was never intended to be a long term solution and, with the release of Squelch Tabs and Accordions Shortcodes, is no longer required. If you receive the following message:

Squelch Tabs and Accordions Shortcodes has detected that you are using a fix for TheThe Fly’s Accordions and Tabs plugin that was made available by Squelch some time ago. The fix in question is NOT intended as a long-term solution and should be removed as soon as possible. By using Squelch Tabs and Accordions you do NOT need the fix. Please see this article for instructions on how to remove the fix from your website.

Then you still have the fix active in your code. You need to go into your functions.php file and find the offending code:

function thethe_fix() { $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https:" : "http:"; wp_deregister_script('jquery'); wp_enqueue_script("jquery", $protocol."//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", array('json2'), '1.8.3'); } if (!is_admin() && function_exists( 'TheTheTS_head_scripts' )) add_action( 'wp_print_scripts', 'thethe_fix', 20 );

Simply comment it out or delete it from the file altogether. On removing the code the error message will disappear.

Tweaking the styles

Changing the theme

By default the plugin uses the smoothness jQuery UI theme. However if this is not to your taste or you just fancy trying something different then you can select a new theme from the plugin’s configuration screen, found by navigating to Appearance > Tabs and Accordions in the admin area. Choose a new theme, click Save Changes, and all of your tabs, accordions and toggles will change theme. The plugin includes a massive 24 jQuery UI themes to choose from, as well as the option to not load any jQuery UI theme or to load only the base styles (see below).

No jQuery UI Theme

This option is provided to allow the plugin to be compatible with other plugins and themes that load a jQuery UI theme. If you are using a plugin or theme that loads a jQuery UI theme then select this option to avoid loading two themes.

jQuery Base Styles Only

Selecting this option will pull in the jQuery base styles. These styles provide the basics, so the various widgets will work as they should but will appear unformatted. This option is very useful if you want to style the widgets yourself using custom CSS.

Theming The Horizontal Accordions

Note that the horizontal accordion widget is based on a modified version of liteAccordion which has been extended to allow compatibility with jQuery UI themes. If you set the theme for the widget to jqueryui it will pull all of its styles straight from the jQuery UI theme that is currently in use. If you choose to use a liteAccordion theme then obviously this will not happen.

The recommended way to change the appearance of your widgets is to use a jQuery UI theme as described in “Changing The Theme”, however if you do wish to change the styles of your widgets manually then this section will help you get started. A good knowledge of CSS is required. You can find all the CSS used by the plugin in the file <plugin directory>/css/squelch-tabs-and-accordions.css and it is recommended that you look in that file for the most up-to-date styles.

Generally, when overriding the styles that are used by the plugin, you should be able to borrow any style directly from the CSS file and then prefix the selector with .squelch-taas-override

So for example if you wanted to override the selector .squelch-taas-toggle .ui-accordion-header-active you would prefix it with .squelch-taas-override to give .squelch-taas-override.squelch-taas-toggle .ui-accordion-header-active (note: No space between the override and the next rule).

Each section of each tab, accordion, horizontal accordion and toggle is numbered so that you can target a specific section on the page. Say you want to target the content of the first accordion section only, you can use .squelch-taas-accordion-shortcode-content-0 to style it. As always a good DOM inspector such as Firebug or the Google Chrome developer tools is your friend.

Note that the tabs are provided by jQuery UI and so it is necessary to override the jQuery UI styles to change their appearance. The safer and easier solution is to roll your own theme using the jQuery UI theme roller, include it within your WordPress theme, and then select “No jQuery UI theme” in the settings.

.squelch-taas-override.squelch-taas-tab-group.ui-widget-content { /* Styles relating to the container of the tab group */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav { /* Styles relating to the tab bar */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li { /* Styles relating to individual tab buttons in the tab bar */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active { /* Styles relating to the button of the currently open tab */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a, .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a:link, .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a:visited { /* Styles relating to the text of the active button */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a, .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a:link, .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a:visited { /* Styles relating to the text of the other (inactive) buttons */ } .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-panel { /* Styles relating to the panel of the tabs (ie where the tab content is) */ }

Note that the accordions are provided by jQuery UI and so it is necessary to override the jQuery UI styles to change their appearance. The safer and easier solution is to roll your own theme using the jQuery UI theme roller, include it within your WordPress theme, and then select “No jQuery UI theme” in the settings.

.squelch-taas-override.squelch-taas-accordion { /* Styles relating to the container of the tab group */ } .squelch-taas-override.squelch-taas-accordion .ui-accordion-header { /* Styles relating to the titles of the panes */ } .squelch-taas-override.squelch-taas-accordion .ui-accordion-active-header { /* Styles relating to the title of the open pane */ } .squelch-taas-override.squelch-taas-accordion .ui-accordion-content { /* Styles relating to the contents of the accordion panes */ }

Squelch Tabs and Accordions Shortcodes uses a modified version of liteAccordion for horizontal accordion functionality. liteAccordion comes with a number of themes by default: “basic”, “dark”, “light” and “stitch”. The script has also been modified to allow the horizontal accordions to use the active jQuery UI theme. It is therefore easier to change the appearance of the horizontal accordions by changing your jQuery UI theme, or even roll your own theme using the jQuery UI theme roller, include it within your WordPress theme, and then select “No jQuery UI theme” in the settings.

To style the horizontal accordions you can either override the relevant jQuery UI styles (the horizontal accordions use the accordion styles) or create a new liteAccordion theme and use the theme="yourtheme" attribute on the shortcode to tell the widget to use your new theme. To create your own liteAccordion theme it is recommended that you look in the relevant section of the file <plugin directory>/css/squelch-tabs-and-accordions.css for examples. However, the following styles should get you started. Replace yourtheme below with the name you want to use for your own theme.

.squelch-taas-haccordion.yourtheme { /* Styles relating to the container of your horizontal accordion */ } .squelch-taas-haccordion.yourtheme .slide > h3 { /* Styles relating to the outermost section of the vertical bars */ } .squelch-taas-haccordion.yourtheme .slide > h3 span { /* Styles relating to the innermost section of the vertical bars */ } .squelch-taas-haccordion.yourtheme .slide > h3 b { /* Styles relating to the enumeration (if enabled) */ } .squelch-taas-haccordion.yourtheme .slide > h3.selected { /* Styles relating to the outermost section of the currently open section's vertical bar */ } .squelch-taas-haccordion.yourtheme .slide > h3.selected span { /* Styles relating to the innermost section of the currently open section's vertical bar */ } .squelch-taas-haccordion.yourtheme .slide > h3.selected b { /* Styles relating to the enumeration (if enabled) of the currently open section's vertical bar */ } .squelch-taas-haccordion.yourtheme .slide > div { /* Styles relating to the content areas of the horizontal accordion */ }

As jQuery UI does not provide a toggle widget, Squelch Tabs and Accordions Shortcodes uses its own built-in jQuery plugin for this functionality. To allow for compatibility with TheThe Tabs and Accordions this plugin has a “blank” theme (or “style” in TheThe Tabs and Accordions’ parlance) which creates a minimal, stripped-down toggle group. Unlike TheThe Tabs and Accordions this plugin uses an actual pluggable theme architecture allowing you to create your own themes. By default it ships with 6 themes: “blank”, which is a very basic stripped-down theme, “basic”, “dark”, “light” and “stitch” which have been created to mimic the themes of liteAccordion, and jqueryui, which pulls in the styles from the active jQuery UI theme. Adding your own theme is not too dissimilar to creating a theme for liteAccordion, or you can simply use a jQuery UI theme.

To create your own toggle theme it is recommended that you look in the relevant section of the file <plugin directory>/css/squelch-tabs-and-accordions.css for examples. However, the following styles should get you started. Replace yourtheme below with the name you want to use for your own theme.

.squelch-taas-toggle.yourtheme { /* Styles relating to the container of the toggle group */ } .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header { /* Styles relating to the horizontal headings */ } .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header-active { /* Styles relating to currently active (open) headings */ } .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header-hover { /* Styles relating to the currently hovered over heading */ } .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header a, .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header a:link, .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header a:visited, .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header a:active, .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-header a:hover { /* Styles related to the links in the headings */ } .squelch-taas-toggle.yourtheme .squelch-taas-toggle-shortcode-content { /* Styles related to the content areas of the toggles */ }

Nesting

WordPress does not handle nested shortcodes of the same kind correctly, so the following will not work:

[tabs title="OUTER TABS"] [tab title="Outer tab"] [tabs title="INNER TABS"] [tab title="Inner tab"] [/tab] [/tabs] [/tab] [/tabs]

To get around this issue and allow the nesting of tabs in tabs the shortcodes [subtabs], [subtab], [subsubtabs] and [subsubtab] were introduced in version 0.2 to allow nested tabs. In the same release [subhaccordions], [subhaccordion], [subsubhaccordions], [subsubhaccordion], [subtoggles], [subtoggle], [subsubtoggles], and [subsubtoggle] were also made available to allow the nesting of all widgets. 0.2.3 also introduced [subaccordions], [subaccordion], [subsubaccordions], and [subsubaccordion].

So to make the previous example code above correct, the inner tabs need to have “sub” prepended to their shortcodes:

[tabs title="OUTER TABS"] [tab title="Outer tab"] [subtabs title="INNER TABS"] [subtab title="Inner tab"] [/subtab] [/subtabs] [/tab] [/tabs]

You can nest up to three levels deep:

[tabs title="OUTER TABS"] [tab title="Outer tab"] [subtabs title="MIDDLE TABS"] [subtab title="Middle tab"] [subsubtabs title="INNER TABS"] [subsubtab title="Inner tab"] [/subsubtab] [/subsubtabs] [/subtab] [/subtabs] [/tab] [/tabs]

You should also be able to nest different types of widgets inside of each other without issue, e.g. accordions inside of tabs. There are no special rules surrounding this.

Embedding YouTube Videos

You might want to embed a YouTube video into a screen widget provided by this plugin. This can be slightly glitchy on certain browsers due to the way YouTube works, but is easily resolved by doing the following:

Change the URL of the embedded video to include &wmode=transparent on the end, and add wmode="opaque" as an attribute to the iframe. For example, if the embed code looks like this:

<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/hMpHF2a-IJY?rel=0" frameborder="0" allowfullscreen></iframe>

Then you would need to change it to look like this:

<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/hMpHF2a-IJY?rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="opaque"></iframe>

WordPress Versions

Please note that as of v0.3 of Squelch Tabs and Accordions Shortcodes versions of WordPress prior to 3.5 are no longer supported as the wordpress.org repository refuses to allow alternative versions of jQuery or jQuery UI to be loaded in a plugin. As such if you are on an older version of WordPress it is strongly recommended that you do NOT upgrade just yet. I’ll look into providing a secondary plugin at some point which will allow the version of jQuery and jQuery UI to be administered, which will make the plugin compatible with older versions of WordPress once again. Sorry for the inconvenience.

Troubleshooting

We go to great lengths to prevent problems arising from the use of this plugin. However, like with any software, there is the potential for things to go wrong or for conflicts to occur. If you’re having problems, please try the following first:

  1. Check your version of WordPress: The latest version of the plugin only supports WP3.5 and newer.
  2. If you are on WP3.5 or newer, ensure you are using the latest version of the plugin.
  3. Look for conflicts with other plugins. Try disabling other plugins on your site in turn and see if it improves the situation. Please note that some themes/plugins are simply not compatible with jQuery UI as they duplicate jQuery UI’s functionality.
  4. If all else fails please get in touch with us on the support forum so that we can look into your issue. Please make sure you tell us which version of the plugin you’re using, what settings you have chosen, any other plugins you have installed and a link to a page on your site that exhibits the problem. The more you tell us the more likely we can help.

Credit

The idea behind this plugin comes from TheThe Tabs and Accordions plugin which, when it was still working and actively maintained, was an excellent plugin.

The horizontal accordions used in Squelch Tabs and Accordions Shortcodes use a modified version of the excellent liteAccordion jQuery widget written by Nicola Hibbert.

License

Squelch Tabs and Accordions Shortcodes is released under the GNU General Public License v2. You are free to redistribute it and/or modify it under the terms of the GNU GPL v2.

The liteAccordion code contained within Squelch Tabs and Accordions Shortcodes is licensed under the MIT Expat license, which is compatible with the GNU GPL v2. You are free to redistribute it and/or modify it under the terms of the MIT Expat license.

Download Squelch Tabs and Accordions Shortcodes WordPress Plugin