Toggles Element

The Toggles Element shows content in collapsible items. Each item has a title that visitors click to open or close the text below it, so long pages stay short and easy to scan. Visitors see all the titles at once and open only the parts they are interested in.

Use it for questions and answers, product details, step-by-step instructions or any content that visitors only need on demand. You choose whether several items may be open at the same time or only one, and you can style the titles, icons, borders and backgrounds to match the rest of the site.

In this article: How To Use · Element Options · Toggle Options · Tips · Related Elements · Example

Add the Toggles Element to any column and add one Toggle item per entry. Give each item a Title and write its text in Toggle Content. Set Open by Default to Yes on an item that should already be open when the page loads. Then choose Toggles or Accordions: toggles let several items be open at once, accordions close the open item when another one opens.

On the Design tab, Boxed Mode puts every item in its own box with a border and background color; without it, Divider Line separates the items with a line. Set the Title Tag, the title and content typography, and the Toggle Icon size, color and alignment. The hover and active accent colors change the icon box and the title when a visitor points at or opens an item.

The Inactive Icon and Active Icon (General tab) replace the default plus and minus signs. Every option left on Default follows the Toggles section in Global Options, so you can style all toggles on the site in one place. Title typography and content typography can also be set per item, which overrides the element’s settings for that item only.

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Toggles. Change them there to style every Toggles at once.

Options with a small state switch next to them can be set separately for the normal, hover and active state.

Each Toggle item has its own title, content and open state, plus optional title and content typography that override the element’s settings for that item.

• Pick the Title Tag by the page structure: if the toggles sit under an H2 section heading, H3 titles keep the heading order correct for search engines and screen readers.
• Each title is a real link with aria-expanded and aria-controls, so keyboard and screen reader users can open and close the items.
• Text inside closed items is still part of the page, so search engines can read it.
• For an accordion, set Open by Default on one item at most; a second open item would close as soon as the visitor opens another.
• Boxed Mode Border Width, Boxed Mode Border Color and Boxed Mode Background Color only apply when Boxed Mode is on.

• FAQ Element – questions and answers from FAQ posts
• Tabs Element – content split into tabs side by side
• Read More Element – hides the end of a long text behind a link
• Checklist Element – short lists that do not need to collapse