Title: Simple Tabs Shortcodes Author: Beherit Published: February 8, 2017 Last modified: April 8, 2020 --- Search plugins This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://s.w.org/plugins/geopattern-icon/simple-tabs-shortcodes.svg) # Simple Tabs Shortcodes By [Beherit](https://profiles.wordpress.org/beherit/) [Download](https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.3.zip) * [Details](https://brx.wordpress.org/plugins/simple-tabs-shortcodes/#description) * [Reviews](https://brx.wordpress.org/plugins/simple-tabs-shortcodes/#reviews) * [Installation](https://brx.wordpress.org/plugins/simple-tabs-shortcodes/#installation) * [Development](https://brx.wordpress.org/plugins/simple-tabs-shortcodes/#developers) [Support](https://wordpress.org/support/plugin/simple-tabs-shortcodes/) ## 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. ## 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: 1. Download the plugin and unzip the archive. 2. Upload the entire `simple-tabs-shortcodes` folder to the `/wp-content/plugins/` directory. 3. Activate the plugin through the Plugins menu in WordPress. ## FAQ ### Example usage There are two shortcodes available, below is a simple example of usage: ``` [tabs] [tab title="First tab"]The content of the first tab.[/tab] [tab title="Second tab"]The content of the second tab.[/tab] [tab title="Third tab"]The content of the third tab.[/tab] [/tabs] ``` This will output the following HTML: ```
The content of the first tab.
The content of the second tab.
The content of the third tab.
``` Optionally, you can set a custom ID by adding `id="my-id"` in tab shortcode. ### Example CSS Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs. ``` .tabs-nav { margin: 0; border-bottom: 1px solid #ccc; } .tabs-nav ul { list-style: none; } .tabs-nav li {display: inline-block;} .tabs-nav a { display: block; padding: 5px 10px; border: 1px solid transparent; text-decoration: none; } .tabs-nav a.active { border-color: #ccc; border-bottom-color: #fff; } section.tab { display: none; margin-bottom: 15px; padding: 15px 0; } section.tab.active {display: block;} ``` ### 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` ### Switching to the tab by the link Tabs can be switched by a normal link, just add a class tab-url to the link. Example: ``` Something ``` ## Reviews ![](https://secure.gravatar.com/avatar/b382bcf0dcb8789f25830744642416830ada9527ee26aaee04a00333703250e1? s=60&d=retro&r=g) ### 󠀁[Super](https://wordpress.org/support/topic/super-1996/)󠁿 [Mladen Gradev](https://profiles.wordpress.org/joe8104/) October 31, 2020 Simle & useful & works great. Thank you! ![](https://secure.gravatar.com/avatar/b6a7270ed42cdc851b822bbe70c4a4e30abdcf25a949826e774dd195e9223857? s=60&d=retro&r=g) ### 󠀁[Thanks for the good work!](https://wordpress.org/support/topic/thanks-for-the-good-work-2/)󠁿 [stephanebeck](https://profiles.wordpress.org/stephanebeck/) May 22, 2019 Beautifully minimalistic. Allows several independent tab groups on the same page. Exactly what I was after! ![](https://secure.gravatar.com/avatar/163f63d478d33a4b609dc42b24ab5874bbbc28c86f8c28e5b15ee328140eeb03? s=60&d=retro&r=g) ### 󠀁[Simple and lightweight! Thanks!](https://wordpress.org/support/topic/simple-and-lightweight-thanks/)󠁿 [laurenfs](https://profiles.wordpress.org/laurenfs/) March 30, 2017 1 reply ![](https://secure.gravatar.com/avatar/cc16ffb593690511d3559842f2a3ba9b0d430aca75e6d494aa56ff391b017141? s=60&d=retro&r=g) ### 󠀁[Super!](https://wordpress.org/support/topic/super-715/)󠁿 [Gronix](https://profiles.wordpress.org/gronix/) February 16, 2017 Thanks 🙂 [ Read all 4 reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/) ## Contributors & Developers “Simple Tabs Shortcodes” is open source software. The following people have contributed to this plugin. Contributors * [ Beherit ](https://profiles.wordpress.org/beherit/) “Simple Tabs Shortcodes” has been translated into 2 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes/contributors) for their contributions. [Translate “Simple Tabs Shortcodes” into your language.](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/simple-tabs-shortcodes/), check out the [SVN repository](https://plugins.svn.wordpress.org/simple-tabs-shortcodes/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/simple-tabs-shortcodes/) by [RSS](https://plugins.trac.wordpress.org/log/simple-tabs-shortcodes/?limit=100&mode=stop_on_copy&format=rss). ## 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. ## Meta * Version **1.3** * Last updated **6 years ago** * Active installations **100+** * WordPress version ** 4.6 or higher ** * Tested up to **5.4.19** * PHP version ** 7.0 or higher ** * Languages * [English (US)](https://wordpress.org/plugins/simple-tabs-shortcodes/), [Polish](https://pl.wordpress.org/plugins/simple-tabs-shortcodes/), and [Russian](https://ru.wordpress.org/plugins/simple-tabs-shortcodes/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes) * Tags * [shortcodes](https://brx.wordpress.org/plugins/tags/shortcodes/)[tab](https://brx.wordpress.org/plugins/tags/tab/) [tabs](https://brx.wordpress.org/plugins/tags/tabs/) * [Advanced View](https://brx.wordpress.org/plugins/simple-tabs-shortcodes/advanced/) ## Ratings 5 out of 5 stars. * [ 4 5-star reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/) ## Contributors * [ Beherit ](https://profiles.wordpress.org/beherit/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/simple-tabs-shortcodes/)