Tabs are web design components that let you stack multiple groups of content in the same space on a web page.
Overview Accordion Open
The information you’re viewing here is being displayed in tabs. Tabs reduce the amount of page real estate used to display content. In the mobile view, the content from tabs stack up starting from the left tab and moving right.
How-To Accordion Closed
Make sure that the tabs in a group contain parallel types of information about a single topic. Also, make sure you’ve grouped the information on each tab in ways that make sense to your site visitors, and you’ve labeled each tab using terms that are familiar to your visitors.
If site visitors are likely to want to compare two types of information, think very carefully before hiding the content in a tab. In most cases, your visitors would rather not have to click to see one set of content and then another.
Consider using tabs when…
- You have two or more closely related headings accompanied by a medium amount of detailed content.
- The content hidden in the tabs isn’t very short or very long or especially important for your site visitors.
Don’t use tabs when…
- You only have a single heading and its related content to put into a tab.
- The content you want to hide in a tab is very short.
- The content you want to hide in a tab is very long.
How to create tabs
The tab shortcode allows you to group related content into blocks organized by up to 5 tabs. The shortcode requires a Heading 4 (H4) title and any type of content.
- Select tab.
- Select the number of tabs to include from the dropdown list.
- The shortcode appears in the text editor.
- Insert your cursor between the first set of shortcode bookends.
- Enter Heading 4 (H4) text for the tab label or title.
- Insert text and/or other elements for tab content.
- Repeat steps 3-6 for each tab.