Ultimate Blocks – Tabs
The plugin Ultimate Blocks provides a tabbed content block. Plugin documentation and demo.
Add a block and search for ‘Tabbed Content‘
Use the +/- icons to add and remove tabs:
This is some demo content.
Demo content 2
This is content.
You can add other blocks inside of tabs.
Demo content 3
Tabby Shortcode documentation
- Official documentation – Tabby Documentation. (Includes documentation of advanced features, like linking directly to a specific tab from another page, and selecting which tab is open by default, and even adding an icon to the tab.)
Tabby Shortcode notes
Tabby responsive tabs are used when a page should be divided into sections aimed at different audiences, or when 2-4 closely related blocks of content are to be displayed on a single page. They can often be used in place of sub-pages that are closely related to the parent page.
Tip: To use the codes on your own pages, select Edit and switch into the Text view tab to copy the shortcodes. Once you have pasted the shortcodes into your page in Text view, you can edit them as needed.
Tabby Responsive Tabs
First Tab
First tab content.
Second Tab
Second tab content.
Third Tab
And the third…
Advanced Tab Linking
Open to Show a Specific Tab (Controlling which tab is open when linking to the page)
Here is the method for opening a specific tab when the page opens:
If you want a specific tab other than the first tab to be open by default when the page first loads, you can add the parameter & value open=”yes” to the shortcode for that tab. As an example, this has been done to the Second Tab above.
If you use the ‘open’ shortcode parameter in one of your tab shortcodes, ensure that you only add it to single tab as having more than one tab open within a tab group is not supported.
Link to Tab
Here is the method for making a link to a specific tab:
You can use a ‘target’ URL parameter to set which tab will be open when the page initially loads. The value of this parameter is based on the tab title specified in the tabby shortcode, but formatted with punctuation & special characters removed, accents removed, and with dashes replacing the spaces.
If you want to link to a ‘contacts’ page with a tab titled ‘Phone Numbers’ open, the url you use to link to this page would look like:
yoursite.com/contact/?target=phone-numbers
If you want a tab with the title ’email addresses’ to be open, the url would look like:
yoursite.com/contact/?target=email-addresses
As a specific example: if you want to link to a page with a tab titled ‘Strategic Plan’ open, the url you use to link to this page would look like:
https://ourtrust.org/our-work/environment/?target=strategic-plan
If the tab title has a special character, such as & in President & Chief Executive Officer, do not include the special character in the link, ie, ?target=president-chief-executive-officer.
Link to an Anchor or ID within a Tab
Apparently, you can link to the ID of any element within a tab – say a section heading partway down in a long tab – and the correct tab will open automagically. Here are the general instructions for linking to items by their ID: https://en.
Advanced Linking Plugin
If you want to jump from Tab to Tab using links within the same page, and not have the page reload when you do, there is a plugin for that: http://cubecolour.co.uk/
