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:
If you want to add more interactivity with tabs, vertical and horizontal accordions on your WordPress website, Squelch Tabs and Accordions Shortcodes is the solution you've been looking for.
[tabs title="" disabled="false" collapsible="false" 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]
[accordions title="" disabled="false" active="0" autoheight="false" collapsible="false"]
[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]
[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]
[haccordions title="" width="300" height="150" 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]
[tabs] [subtabs] [subsubtabs]
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
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
class
(text) Class(es) to add to the tab and content area Default: (empty)
[tablinks] shortcode usage
Since v0.4.
This shortcode is not intended for the average end user. Provided for developers who need to be able to add links to tabs elsewhere in the page. Must appear after the [tabs] shortcode you want to display the tabs from, and can (currently) only be used to show the last set of tabs outputted when using nested tabs. Simply outputs a basic <ul> list with a class of squelch-taas-tablink which you can style in your CSS to suit your needs. This can be useful on longer pages where, after a tab block, you need to repeat the tab links to encourage the user to read further content from the tab block.
[accordions] [subaccordions] [subsubaccordions]
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] [subaccordion] [subsubaccordion]
title
(text) The title for this pane Default: ” ” (6 spaces)
[toggles] [subtoggles] [subsubtoggles]
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
[toggle title="Pane 0"]Toggle pane 0 content[/toggle]
[toggle] [subtoggle] [subsubtoggle]
title
(text) The title for this pane Default: ” ” (6 spaces)
[haccordions] [subhaccordions] [subsubhaccordions]
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] [subhaccordion] [subsubhaccordion]
title
(text) The title for this pane Default: ” ” (6 spaces)
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).
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.
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.
To roll your own jQuery UI theme you will need to follow these steps:
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 custom 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 if you're looking for a reference of the most up-to-date styles. Do not edit this file directly, put your styles in a child theme or custom CSS plugin. Note also that this file is loaded in addition to any theme you have chosen on the admin screen.
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. That task, however, is beyond the scope of this guide.
.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. That task, however, is beyond the scope of this guide.
.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 */ }
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 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 */ }
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 */ }
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]
Currently 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, it should just work out of the box.
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>
Some themes ship with shortcodes for creating tabs and accordions, and when they do it is likely that they will conflict with Squelch Tabs and Accordions Shortcodes. If this is the case then you can simply use the theme's built-in shortcodes and disable Squelch TAAS. But if you'd prefer to use Squelch TAAS in place of your theme's shortcodes, then you can use the "sub" and "subsub" shortcodes (see "Nesting widgets" above) in order to avoid a conflict.
[tabs] [tab title="This conflicts"] Sadly this might conflict with a theme's built-in shortcodes. [/tab] [/tabs]
By replacing [tabs] with [subtabs] and [tab] with [subtab] we can prevent a conflict with the theme's built-in shortcodes:
[subtabs] [subtab title="This should avoid a conflict"] This should not conflict. Hurrah. [/subtab] [/subtabs]
As of version 0.3.7 it is possible to link to tabs and accordions on your website. The easiest way to achieve this is to open the tab you want to link to and, if you take a look at the page address, it should change as you click the tab. If you copy and paste this address it should link directly to the tab you have chosen.
Since v0.3.7 Squelch Tabs and Accordions Shortcodes has allowed linking to tabs and accordions by adding a special piece of extra information to the URL of the page when a tab or accordion is click on. This would look like, for example:
#squelch-taas-toggle-shortcode-content-3
Some users asked that they be able to remove the "squelch-taas" part of this magic identifier so that they could brand it after their own website. As of v0.4 this is now possible by changing the "Vanity URL prefix" option under the "Appearance > Tabs and Accordions" settings page. Note that you will need to click the "Show advanced options" button in order to change this setting.
Being able to link to a tab was the most commonly requested feature since Squelch Tabs and Accordions was first launched, but since the feature was introduced we have had a number of requests to be able to disable the feature completely due to a general dislike of the magic URLs that are generated when changing tabs or accordions. As of v0.4 you can now disable that feature by ticking the "Disable magic URLs" tick box under the advanced options section of the "Appearance > Tabs and Accordions" settings page.
This option does not disable linking to a tab, just the generation of the magic URLs. So if you have any links to a specific tab / accordion / toggle, or if any external websites have linked to a specific widget panel, this will continue to work. But changing the tab or toggle will no longer generate the magic URL portion.
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:
We work hard to provide not only a robust plugin, but also top quality documentation to guide you in using the plugin. But if you do need support then we'll do our best to help.
Please note that this is a free plugin from a money-making organisation. We do our best to support our plugin users, but paid work does come first. Right now we do not offer a premium version of the plugin, nor a premium support option, but we are considering this for the future.
Please note also that we do not provide any support for this plugin via email, all support requests must be raised on the wordpress.org directory forum. We are automatically notified whenever a support thread is opened, and we'll do our best to help you out as quickly as possible.
Download