Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Using accordions and tabs

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

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. 

tabs_and_accordions.png

Insert into the body content

Follow these steps to insert accordions or tabs into your page:

  1. On the page's Overview tab, click on the WYSIWYG Editor to open it.
  2. In the WYSIWYG Toolbar, select Insert accordions or tabs to open the accordions and tabs menu.
    insert accordions icon in toolbar
  3. From the Show as dropdown 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.
  4. Select Add Item to open a simplified WYSIWYG Editor where you can enter the container title and content.
  5. Once you've entered your content, select Add
    insert accordions menu
  6. 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.
  7. 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 that were not intended to be copied. This can cause issues when accordion content is saved or with how it is displayed. To ensure that 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, you shouldn't have more than 3-4 tabs on the page regardless of the template. If you need more containers, then you should use accordions. Tabs are also not designed to have long titles; any titles for tabs should be no more than 2 words. Accordions are the better option if you have long titles, such as those normally 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 amount of 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, it is best to insert static content such as text or images. Using interactive content such as forms, calendars, tables, maps, or additional tabs or accordions can be visually confusing.
  • If you find that you still have too much information in each container, consider putting a short overview of the content and linking out to more information with a Call to action button
  • Be aware that 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 still shouldn't have more than 6-7 accordions or 4 tabs. If there are too many accordions the page will still be too long, and 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 the way they display.
4 tabs on a mobile device tabs on a mobile device 4 tabs on a desktop device tabs on a desktop device
7 accordions on a mobile device Accordions on a mobile device 7 accordions on a desktop device accordions on a desktop device
Was this article helpful?
0 out of 0 found this helpful