Simple Tabs Shortcodes

Adds shortcodes to place a page content in tabs

Plugin adds shortcodes to place a page content in tabs. Uses a lightweight JS script, no additional CSS files so you need to add own CSS style to your theme’s stylesheet to ensure proper display of the tabs.

There are two shortcodes available, below is a simple example of usage:

This will output the following HTML:

Optionally, you can set a custom ID by adding id="my-id" in tab shortcode.

Simple Tabs Shortcodes

Example CSS

Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs.

Selecting a tab by the URL

You can select default tab by using a hash in the URL – simply add #tab-name at the end of the page URL to select the specific tab. This example URL will select tab with the title / id “something”: http://domain.tld/your-page/#something.

Tabs can be switched by a normal link, just add a class tab-url to the link. Example:

1.3 08.04.2020
Pure JavaScript instead of jQuery.
1.2 12.09.2019
Support non-Latin URLs.
1.1.2 13.12.2018
Minor fixes.
1.1 07.12.2017
Changed class name tab-content to tabs-content.
1.0.2 10.02.2017
Changes in tabs navigation structure.
1.0 09.02.2017
First public version.