For the easiest way to customise how your tabs display, check out the Tabby Responsive Tabs Customiser plugin.
Tabby responsive tabs will enable you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs turn into an accordion on a viewport 767px wide or less.
- Adds a Horizontal Tabbed interface which changes to Accordion when the viewport width is 767px or less
- Tabs and accordion are created with jQuery
- Supports multiple sets of tabs on same page
- Uses Semantic header and Content markup
- Aria attributes and roles aid screen reader accessibility
- Tabs and content are accessible via keyboard
Usage
There are two shortcodes, which should both be used: [tabby] and [tabbyending]
The title of each tab is marked up as [tabby title="tabname"] Where tabname is the title of your tab.
Add the tab content after the [tabby] shortcode.
After the content of the last tab in a tabgroup, use a [tabbyending]shortcode.
The shortcode should be have an empty line above and below to allow the wpautop function to format the tab content correctly.
Example
[tabby title="First Tab"]
Tabby ipsum dolor sit amet, kitty sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur pussy libero.
[tabby title="Second Tab"]
Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
[tabby title="Third Tab"]
Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.
[tabbyending]
The result
First Tab
Tabby ipsum dolor sit amet, kitty sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur pussy libero.
Second Tab
Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
Third Tab
Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan
You can include more than one tab group on a page
Another
Nam iaculis climb the curtains iaculis scratched catnip, hairball neque elit non fluffy fur. Scratched kittens sleep on your keyboard litter box.
Tab
Feed me enim nam meow, jump chuf meow litter box hairball vulputate. Elit zzz nibh vel, eat the grass sleep on your keyboard suspendisse lay down in your way.
Group
Pellentesque cras nec catnip tincidunt a stuck in a tree leap, fluffy fur hiss chase the red dot rhoncus. Faucibus kittens nibh I don’t like that food.
And
Nam iaculis climb the curtains iaculis scratched catnip, hairball neque elit non fluffy fur. Scratched kittens sleep on your keyboard litter box.
Another
Feed me enim nam meow, jump chuf meow litter box hairball vulputate. Elit zzz nibh vel, eat the grass sleep on your keyboard suspendisse lay down in your way.
one
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
The plugin is available to download from WordPress.org at http://wordpress.org/plugins/tabby-responsive-tabs/
Support
Support for this plugin is provided at http://wordpress.org/support/plugin/tabby-responsive-tabs
Additional shortcode parameters which can be used are documented on the plugin page https://wordpress.org/plugins/tabby-responsive-tabs/ on WordPress.org
For the easiest way to customise how your tabs display, check out the Tabby Responsive Tabs Customiser plugin.