01635 500 315hi@squelch.itlowemasterpro

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 the solution you’ve been looking for.

Basic usage examples…

Keep scrolling down for the complete instructions. These are just some basic examples to get your started.

 

Three simple tabs

[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 0 content
Tab 1 content
Tab 2 content

 

Three simple accordions

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

 

Pane 0

Accordion pane 0 content

Pane 1

Accordion pane 1 content

Pane 2

Accordion pane 2 content

 

Three simple toggles

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

 

Pane 0

Toggle pane 0 content

Pane 1

Toggle pane 1 content

Pane 2

Toggle pane 2 content

 

A basic horizontal accordion

Please note that horizontal accordions are NOT responsive.

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

 
  1. Pane 0

    Accordion pane 0 content
  2. Pane 1

    Accordion pane 1 content
  3. Pane 2

    Accordion pane 2 content

Full shortcodes documentation

All documentation can be found here. Please choose a section from below to view documentation for that widget.

 

Shortcodes documentation

tabs shortcode

[tabs] shortcode usage

[tabs title="" disabled="false" collapsible="true" active="0″ event="click"]

 

Aliases

[tabs] [subtabs] [subsubtabs]

 

[tabs] shortcode 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

tab shortcode

[tab] shortcode usage

[tab title="Tab 0″ icon="" iconalt="" iconw="" iconh=""]Tab 0 content[/tab]

 

Aliases

[tab] [subtab] [subsubtab]

 

[tab] shortcode 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

accordions shortcode

[accordions] shortcode usage

[accordions title="" disabled="false" active="0″ autoheight="false" collapsible="true"]

 

Aliases

[accordions] [subaccordions] [subsubaccordions]

 

[accordions] shortcode 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 shortcode

[accordion] shortcode usage

[accordion title="Pane 0″]Accordion pane 0 content[/accordion]

 

Aliases

[accordion] [subaccordion] [subsubaccordion]

 

[accordion] shortcode parameters

title

(text) The title for this pane
Default: ”      ” (6 spaces)

toggles shortcode

[toggles] shortcode usage

[toggles title="" speed="800″ active="0,2″ theme="jqueryui"]

 

Aliases

[toggles] [subtoggles] [subsubtoggles]

 

[toggles ] shortcode 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

toggle shortcode

[toggle] shortcode usage

[toggle title="Pane 0″]Toggle pane 0 content[/toggle]

 

Aliases

[toggle] [subtoggle] [subsubtoggle]

 

[toggle] shortcode parameters

title

(text) The title for this pane
Default: ”      ” (6 spaces)

haccordions shortcode

[haccordions] shortcode 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"]

 

Aliases

[haccordions] [subhaccordions] [subsubhaccordions]

 

[haccordions] shortcode 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 shortcode

[haccordion] shortcode usage

[haccordion title="Pane 0″]Accordion pane 0 content[/haccordion]

 

Aliases

[haccordion] [subhaccordion] [subsubhaccordion]

 

[haccordion] shortcode parameters

title

(text) The title for this pane
Default: ”      ” (6 spaces)

Styling the widgets

Styling the widgets generated by Squelch Tabs and Accordions is straightforward providing you understand CSS.

Changing the theme

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.

Please note: There is a known bug on this admin screen. Immediately after saving your PREVIOUS theme will be displayed. Rest assured your change has been saved. If you navigate away from this page and then back the correct theme will be displayed.

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.

General notes on styling the widgets - READ THIS FIRST

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.

Styling the tabs

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) */
}

Styling the accordions

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 */
}

Styling the toggles

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 */
}

Styling the horizontal accordions

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 */
}

Advanced topics

Nesting widgets (e.g. tabs inside of tabs)

Nesting widgets

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.

Embedding YouTube Videos

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>

If your theme already provides tab and accordion shortcodes

If your theme already provides tab and accordion shortcodes

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]

How to troubleshoot the plugin if you encounter a problem

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.

How to get support

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.

  1. Before asking for support please read this post.
  2. Once you’ve read that post you can raise a support request.
Squelch Tabs and Accordions Shortcodes is 100% free and can be downloaded from the WordPress.org plugins directory.

 

Download