=== Simple Tabs Shortcodes ===
Contributors: Beherit
Tags: tab, tabs, shortcodes
Donate link: https://beherit.pl/en/donations/
Requires at least: 3.1
Tested up to: 4.7.2
Stable tag: 1.0
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html

Adds shortcodes to place a page content in tabs. Uses a lightweight jQuery script, no additional CSS files.

== Description ==
Plugin adds shortcodes to place a page content in tabs. Uses a lightweight jQuery script, no additional CSS files so you need to [add own CSS style](https://wordpress.org/plugins/simple-tabs-shortcodes/other_notes/) to your theme's stylesheet to ensure proper display of the tabs.

There are two shortcodes available, below is basic usage example:
`[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:
`<div class="tabs-container">
	<ul class="tabs-nav">
		<li><a href="#first-tab" class="active">First tab</a></li>
		<li><a href="#second-tab">Second tab</a></li>
		<li><a href="#third-tab">Third tab</a></li>
	</ul>
	<div class="tab-content">
		<section id="first-tab" class="tab active">The content of the first tab.</section>
		<section id="second-tab" class="tab">The content of the second tab.</section>
		<section id="third-tab" class="tab">The content of the third tab.</section>
	</div>
</div>`
Optionally, you can set a custom ID by adding `id="my-id"` in tab shortcode.

== Installation ==
This section describes how to install the plugin and get it working.

1. Install Simple Tabs Shortcodes either via the WordPress.org plugin directory, or by uploading the files to your server.
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. Add the shortcodes to your content.
4. [Add own CSS style](https://wordpress.org/plugins/simple-tabs-shortcodes/other_notes/) to your theme's stylesheet to make the tabs look the way you want.

== Frequently Asked Questions ==
No questions yet.

== Other Notes ==
= Example CSS =
Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs.
`ul.tabs-nav {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #ccc;
}
ul.tabs-nav li {display: inline-block;}
ul.tabs-nav a {
	display: block;
	padding: 5px 10px;
	border: 1px solid transparent;
	text-decoration: none;
}
ul.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:
`<a class="tab-url" href="#something">Something</a>`

== Changelog ==
= 1.0 (2017-02-09) =
* First public version.

== Upgrade Notice ==
= 1.0 =
* First public version.