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:

<div class="tabs-container">     <div class="tabs-nav">         <ul>             <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>     <div class="tabs-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.

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:

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