TheThe Tabs and Accordions

Free Download

TheThe Tabs and Accordions WordPress plugin provides stylish Web 2.0 tools – Tabs, Vertical and Horizontal Accordions and Toggles – to add to your WP blogs. This plugin helps you to make your WordPress website look more aesthetic and professional.

How does it work?

After installing and activating TheThe Tabs and Accordions on your WordPress site, simply insert a shortcode on any page, post, and even in the text of a sidebar – wherever you need tabs, toggles, vertical and horizontal accordions to be displayed. In the shortcode, you can set all the parameters of the tool.

Why use Tabs & Accordions on your website?

Tabs and Accordions help in improving your WorpPress website by:

Adding more interactivity: With collapsible tabs and accordions, you can better control content display on your website with multiple panes.
Adding more style: Toggles and Accordions make your WordPress website look more aesthetic and help in presenting the content more professionally.
Saving page space: Tabs and accordions can save a lot of page space making your website look less cluttered.
Separating content: Showing content only when required while the rest remains invisible dividing the content into parts.

Today, tabs, accordions and toggles are the most popular effects on the Web. Accordion effect is one of the best implementation of interactive non-flash web design that most designers use on their websites. Many developers also implement JavaScript show/hide a.k.a. Toggle function to add show/hide effect on their webpage. Accordions complete the toggling function making it more interactive, smooth and easy-to-use while showing/hiding the content as needed.

So, if you want to add more interactivity with Tabs, Vertical and Horizontal Accordions and Toggles on your WordPress website, TheThe Tabs and Accordions is a good option.

Seeing is Believing

See live demo here:

Shortcodes and Parameter Options

Toggles Shortcode Example

[toggles title="Toggle Group Title" speed=500]
	[toggle title="First toggle title"]
		First toggle text
	[/toggle]
	[toggle title="Second toggle title"]
		Second toggle text
	[/toggle]	
[/toggles]

[toggles] parameters

title: String, sets toggle group title in <h2> tag.
speed: Number, specifies duration of animation in ms.
active: Number, specifies number of the toggle to be opened on initialization. On default – none (all toggles are closed).
style: String, sets blank style(recommended for FAQ pages). Possible values: “blank”.

[toggle] parameters

title: String, sets a toggle title.

Tabs Shortcode Example

[tabs title="Tabs Group Title" event="click" ]
    [tab title="First tab title"]
        First tab content
    [/tab]
    [tab title="Second tab title"]
        Second tab content
    [/tab]
[/tabs]

[tabs] parameters

title: String, sets toggle group title in <h2> tag.
disabled: Boolean, disables (true) or enables (false) the tabs. Can be set when initialising the tabs.
collapsible: Boolean, set to true to allow an already selected tab to become unselected again upon reselection.
active: Number, index of the tab to be selected on initialization.
event: String, the type of event to be used for selecting a tab. Possible values: “mouseover” or “click”.

[tab] parameters

title: String, sets a toggle title.

Accordion Shortcode Example

[accordions title="Accordion Group Title" active=1 event="click" autoheight=true]
    [accordion title="Accordion 1 Title"]
	    First accordion section content
    [/accordion]
    [accordion title="Accordion 2 Title"]
	    Second accordion section content
    [/accordion]
[/accordions]

[accordions] parameters

title: String, sets toggle group title in <h2> tag.
disabled: Boolean, disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.
active: Number, index of the active element. Set to false to display none at start.
animated: Boolean, String, choose your favorite animation, or disable them (set to false). In addition to the default, ‘bounceslide’ and all defined easing methods are supported (‘bounceslide’ requires UI Effects Core).
autoheight: Boolean, if set, the highest content part is used as height reference for all other parts. Provides more consistent animations.
clearstyle: Boolean, if set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won’t work together with autoHeight.
collapsible: Boolean, whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).
event: String, the event on which to trigger the accordion. Possible values: “mouseover” or “click”.
fillspace: Boolean, if set, the accordion completely fills the height of the parent element. Overrides autoheight.

[accordion] parameters

title: String, sets a toggle title.

Horizontal Accordion Shortcode Example

[haccordions title="Horizontal Accordion Group Title" width=500 height=320 hwidth=28 speed=200 active=1]
    [haccordion title="Fist title"]First accordion content[/haccordion]
    [haccordion title="Second title"]Second accordion content[/haccordion]
[/haccordions]

[haccordions] parameters

title: String, sets toggle group title in <h2> tag.
width: Number, width of haccordion in px.
height: Number, height of haccordion in px.
hwidth: Number, width of each header(title) in px.
speed: Number, duration of animation in ms.
active: Number, index of the header(title) to be selected on initialization.
autoplay: Boolean, automatically scroll through the slides.
cyclespeed: Number, time between slide activation (time/ms).
pauseonhover: Boolean, pause slides on hover.
enumerate: Boolean, show slide number in tab.