Web-based content should always be divided into easily-read chunks of information, which can become difficult if your page has lots of necessary or complicated content. Accordions and tabs are a way of breaking up page content so that your site visitors are not presented with daunting walls of text (instead, they can scan the page for information relevant to them) and so that you can optimize screen space and still present a lot of content.
Accordions and tabs can contain anything inserted through the WYSIWYG Editor but are best used to display static content like text and images. Nesting interactive content such as tables, forms, accordions, and tabs inside other accordions can confuse site visitors. It can also interfere with the display of accordions and tabs, especially regarding accessibility.
Accordions display and expand vertically, while tabs are displayed horizontally. Both tools can divide page content so readers are presented with only what they need but can see more or alternative details if they choose. Accordions and tabs are good for chunks of content that don't need to be accessed simultaneously, or that won't apply to everyone.
Insert into the Body Content
Follow these steps to insert accordions or tabs into your page:
- On the page's Overview tab, click on the WYSIWYG Editor to open it.
- In the WYSIWYG Toolbar, select Insert accordions or tabs to open the accordions and tabs menu.
- From the Show as drop-down menu, choose whether you want Accordions or Tabs. Select which heading style you want for your containers (H2 will be best for most cases) from the Heading level dropdown menu.
- Select Add Item to open a simplified WYSIWYG Editor where you can enter the container title and content.
- Once you've entered your content, select Add.
- Repeat steps 4-5 for each accordion or tab. Once you've added all the containers, you can use the 4 arrows icon to reorder them.
- Once you're happy, select Insert to save.
Your accordions or tabs will appear as a green plugin box in your WYSIWYG Editor. The box will show you how many containers you've used, whether they're accordions or tabs, which heading level they're set to, and the title of each container. To edit them, right-click on the plugin box and select Edit accordions or tabs, then select the edit icon next to each container to edit them.
Copying and pasting content into an accordion can sometimes contain markup or HTML elements not intended to be copied. This can cause issues when accordion content is saved or with how it is displayed. To ensure no residual HTML is brought in during the copying process, we recommend copying content through a basic text editor (like Notepad) or pasting it as plain text to remove this markup.
Tabs or Accordions?
Whether to use accordions or tabs depends on the content you want to include and the template of your page. If, for example, you have a full-width general page, then there is more space for tabs. However, regardless of the template, you shouldn't have more than 3-4 tabs on the page. If you need more containers, then you should use accordions. Tabs are also not designed to have long titles; titles for tabs should be no more than two words. Accordions are better if you have long titles, such as those used for FAQs.
Additionally, if the content inside each container is long, it might be better to use accordions. These are closed upon the first load and won't take up as much screen space until expanded. If you use tabs, we recommend having the content for each tab as even as possible. Switching tabs of differing sizes can be disorientating, as the rest of the screen space will shrink and expand to accommodate the tab containers.
Best-practice Tips
- Although tabs and accordions can use various tools in their WYSIWYG Editors, inserting static content such as text or images is best. Using interactive content such as forms, calendars, tables, maps, or additional tabs or accordions can be visually confusing.
- If you still have too much information in each container, consider putting a short overview of the content and linking to more information with a Call to action button.
- Some content types have an accordion panel field built into the supporting information. The same rules apply; they're best used for short FAQ sections or brief supporting information. The content types that have built-in accordions are:
- OC Consultation
- OC Elected Official
- OC Department
- OC Development Application
- OC Initiative
- OC Service
- While you can generally have more accordion containers than tab containers, you shouldn't have more than 6-7 accordions or four tabs. If there are too many accordions, the page will still be too long; if there are too many tabs, they will fall into a vertical stack. Additionally, as you can see below, the presentation of accordions and tabs will vary between devices. So always check your accordions and tabs on multiple devices to ensure you are happy with how they display.
| Four tabs on a mobile device | Four tabs on a desktop device | ||
| Seven accordions on a mobile device | Seven accordions on a desktop device |