{"name":"Simple Tabs Shortcodes","slug":"simple-tabs-shortcodes","version":"1.3","author":"Krzysztof Grochocki","author_profile":"https://profiles.wordpress.org/beherit/","requires":"4.6","tested":"5.4.16","requires_php":"7.0","requires_plugins":[],"rating":100,"ratings":{"1":0,"2":0,"3":0,"4":0,"5":4},"num_ratings":4,"support_threads":0,"support_threads_resolved":0,"downloaded":5419,"last_updated":"2020-04-08 10:55am GMT","added":"2017-02-08","homepage":"https://beherit.pl/en/wordpress/simple-tabs-shortcodes/","sections":{"description":"

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.

\n","installation":"

In most cases you can install automatically from plugins page in admin panel.

However, if you want to install it manually, follow these steps:

Download the plugin and unzip the archive.
Upload the entire simple-tabs-shortcodes folder to the /wp-content/plugins/ directory.
Activate the plugin through the Plugins menu in WordPress.

\n","faq":"\n

\nExample usage\n

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

[tabs]\n[tab title=\"First tab\"]The content of the first tab.[/tab]\n[tab title=\"Second tab\"]The content of the second  tab.[/tab]\n[tab title=\"Third tab\"]The content of the third tab.[/tab]\n[/tabs]\n

This will output the following HTML:

<div class=\"tabs-container\">\n    <div class=\"tabs-nav\">\n        <ul>\n            <li><a href=\"#first-tab\" class=\"active\">First tab</a></li>\n            <li><a href=\"#second-tab\">Second tab</a></li>\n            <li><a href=\"#third-tab\">Third tab</a></li>\n        </ul>\n    </div>\n    <div class=\"tabs-content\">\n        <section id=\"first-tab\" class=\"tab active\">The content of the first tab.</section>\n        <section id=\"second-tab\" class=\"tab\">The content of the second tab.</section>\n        <section id=\"third-tab\" class=\"tab\">The content of the third tab.</section>\n    </div>\n</div>\n

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

\nExample CSS\n

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

.tabs-nav {\n    margin: 0;\n    border-bottom: 1px solid #ccc;\n}\n.tabs-nav ul {\n    list-style: none;\n}\n.tabs-nav li {display: inline-block;}\n.tabs-nav a {\n    display: block;\n    padding: 5px 10px;\n    border: 1px solid transparent;\n    text-decoration: none;\n}\n.tabs-nav a.active {\n    border-color: #ccc;\n    border-bottom-color: #fff;\n}\nsection.tab {\n    display: none;\n    margin-bottom: 15px;\n    padding: 15px 0;\n}\nsection.tab.active {display: block;}\n

\nSelecting a tab by the URL\n

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

\nSwitching to the tab by the link\n

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

<a class=\"tab-url\" href=\"#something\">Something</a>\n

\n\n","changelog":"

1.3 (2020-04-08)

Pure JavaScript instead of jQuery.

1.2. (2018-08-12)

Support non-Latin URLs.

1.1.2 (2018-12-13)

Minor fixes.

1.1 (2017-12-07)

Changed class name tab-content to tabs-content.

1.0.2 (2017-02-10)

Changes in tabs navigation structure.

1.0 (2017-02-09)

First public version.

\n"},"download_link":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.3.zip","screenshots":[],"tags":{"shortcodes":"shortcodes","tab":"tab","tabs":"tabs"},"versions":{"1.0":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.0.zip","1.0.2":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.0.2.zip","1.1":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.1.zip","1.1.2":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.1.2.zip","1.2":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.2.zip","1.3":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.3.zip","trunk":"https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.zip"},"donate_link":"","icons":{"default":"https://s.w.org/plugins/geopattern-icon/simple-tabs-shortcodes.svg"},"contributors":{"beherit":"https://profiles.wordpress.org/beherit/"}}

Simple Tabs Shortcodes

Screenshots

Categories

Get New Themes & Resources