Accordion, Tabs and List widget settings

Three Basic widgets for repeated content. Accordion shows questions that open to show answers. Tabs shows one panel at a time behind a row of tabs. List shows items such as services or team members, as rows or cards.

Each item has text, an optional image and an optional button. You can type the items in, or fill the widget from a collection. These basic versions hold text, an image and a button per item. To put any widgets inside a tab or accordion panel, use Advanced Tabs or Advanced Accordion instead (see Advanced Tabs, Accordion and Grid).

Spacing, Animations & Effects and the text style group (font, size, color, format, alignment, text shadow, plus background, border and padding where shown) work the same on every widget. See Widget design panel basics and Animations and effects.

How to add one

1. Open the editor and click Add.
2. Under Basic, drag Accordion, Tabs or List onto the page.
3. Click Manage Accordion, Manage Tabs or Manage List in the toolbar to add items.
4. Click Done to save your changes as one step (Undo puts them all back).

The Manage window (all three)

• At the top, choose Manual items (or Manual tabs) or From a collection.
• Manual: the item list has Move up, Move down, Duplicate and Delete on each row, and Add item at the bottom. Click an item to edit it on the right.
  • Its text parts (see each widget below). Rich-text parts can hold links and data tokens.
  • Image (optional): pick or Replace a photo, with Alt text. List and Tabs items also have a Focal point to choose which part of the photo stays in view. When a Tabs widget shows its media as the Pane background (Tab Media), this box is called Media and also offers Add video / Use video.
  • Show button: turns on a button with Button text and a Button link (any link type).
  • Anchor (optional) (Accordion and Tabs): a name like "pricing-question". A link to #pricing-question on the page opens that item and scrolls to it. From title or question (Accordion) or From tab label (Tabs) fills it in from the item's text. If two items use the same anchor you'll see "Another item already uses this anchor." and Done stays grayed out.
• From a collection: pick the Collection ("No collections yet — create one in CMS → Collections." if there are none).
  • Fields: match each text part to a collection field, plus Image, Image alt text, Button text field (or Same text for every item with your own words) and Button link. Accordion and Tabs also offer Use each item URL as its anchor.
  • Filter & sort: Filters (is, is not, contains, greater than, less than, is empty, is not empty) with Add filter; Match this dynamic page on a dynamic page (only items whose field matches the current entry; default "Off — show the same items on every entry"); Sort by (Collection order or a field, Ascending / Descending); and Number of items (blank = All).
  • See Collections and dynamic pages.

Accordion

Item parts: Title or question and Description (rich text). The answers are real page text, so search engines and AI search can read them even when closed, and they open without any script.

Manage Accordion: extra settings

• Display rules
  • Show one expanded item at a time: opening one closes the others. On by default.
  • Show first item expanded: the first answer starts open. Off by default.
• SEO
  • Enable FAQ schema: adds FAQ structured data so Google can show these questions and answers in search results. Off by default. Use it on one accordion per page. See Schema and FAQ audit.
• Internal links (Service Area FAQ)
  • Link mentions to pages: links the first mention of the page's service and your business name inside the answers. At most one link per answer and 6 per page, never to the contact page or the page you're on. Off by default.
  • Service areas (link each area's page): the collection of your service areas (the page's own collection is marked "(this page's collection)"). Area name field picks the field with the town name (default First text field). Service area pages never link to other service area pages, so area names aren't linked.
  • Services from a collection: a collection of services whose dynamic pages are the link targets.
  • …or service pages: tick ordinary pages to use as services instead (contact pages aren't listed).
  • This page's parent service is named in (dynamic pages only): pick the field that names this area's main service, so only that service gets linked. Default Any listed service.
  • Link the business name to the homepage: on by default.
  • Never link these words (comma-separated).
  • Links that will be added: a live preview, for example "Answer 2 · Service: "roof repair" → /services/roof-repair".
  • The links only change what visitors see. The FAQ schema keeps the plain answers. See Internal links.

Layout

Pick a look. Each picture button sets the fills, divider lines and icons in one click. Your fonts and text colors stay, and you can change anything afterwards.

• Lines: a thin line under each title, no fill, a + on the right that turns into − when open.
• Boxed: each title on a light bar with a gap between items, and a chevron in a dark circle on the right. New accordions start like this.
• Lines + fill: lines between items, a plain chevron on the right, and the open item's answer on a light background.
• Left icon: a check (or any icon) before each title, light title bars, and a chevron on the right.
• Minimal: a small arrow on the left (› when closed, ⌄ when open), no lines and no fill.

Behavior

• Open one at a time: opening one item closes the others. On by default. (Also in Manage Accordion.)
• First item open: the first answer starts open. Off by default.

Collapsed Style

How every title looks. The open item uses these too, unless you change it under Expanded Style.

• The text style group for the title: font, size (up to 72px, per screen size), color, bold / italic, alignment, text shadow, plus Background, Border, Border color and Padding.
• Item background: a color behind the whole item (title and answer). Text on it follows the color so it stays readable.

Expanded Style

How the open item looks. Leave a setting empty to keep the collapsed look.

• Title font: a different font for the open title.
• Title color and Title background.
• Item background: the whole open item.
• Content background and Content text color: the answer area (the same settings as Content Text → Background and Text color).
• Icon color and Icon background: the expansion icon while open.
• Left icon color (when the left icon is on).

Expansion Icon

• Icon: Chevron (turns over when open), Plus / minus, Circle chevron (a chevron in a ring), Arrow (turns over), Side chevron (› turns to ⌄) or None. Default Chevron.
• Position: Right or Left. Default Right.
• Icon size: 8–64px, per screen size.
• Icon color. With no color the icon uses the title's text color.
• Filled circle: puts the icon on a filled circle. Then Circle color, Padding (0–32px, per screen size) and Roundness (0–50%; 50% is a full circle).

Left Icon

• Icon before each title: off by default.
• Icon: opens the icon picker. Default a check mark.
• Icon color. With no color it uses the title's text color.
• Icon size: 8–64px, per screen size. Default 20px.

Dividers

• Show lines: off by default.
• Where: Between items, Under each title or Around each item.
• Line color. With no color the line is a soft version of the text color, so it shows on light and dark backgrounds.
• Thickness: 1–10px. Default 1px.

Items

• Gap between items: 0–80px, per screen size.
• Corner radius: 0–40px, rounds each item's corners.

Content Text

The text style group for the answers, with background, border and padding (size up to 48px).

Image in Item

Add a picture to an item in Manage Accordion (Image). It shows beside the answer.

• Image position: Left, Top or Right. Default Left.
• Width: 24–600px, per screen size.
• Corner radius: 0–100px.
• Border: 0–12px, and Border color.

Title & Button

• Title heading: H2, H3, H4, H5, H6 or Paragraph. Default H3.
• Button style: Primary or Secondary (from the site theme).

Frame

• Side padding: 0–80px, per screen size.
• Background, Border (0–12px), Border color and Corner radius (0–48px) of the whole accordion.
• Direction: Left to right or Right to left (for right-to-left languages).

Spacing, Animations & Effects

Margin, plus Hover effects, Entrance and Scroll.

Accordions made before these layouts look exactly the same. They don't show a layout as picked until you choose one.

Tabs

Item parts: Tab label (the words on the tab), Title and Description (rich text).

Manage Tabs: extra setting

• Show image: shows each tab's image. On by default. With Pane background on (Tab Media) it's called Show background photo / video.
• Each tab's Media: a photo, or (with Pane background) a video from your media library, plus its Focal point (which part stays in view when the photo is cropped to fill the pane). Videos play muted on a loop. The pane doesn't show the poster first; the poster is for visitors whose device asks for less motion, or whose browser blocks autoplay.
• From a collection: with Pane background on, a Video field can be mapped when no image field is.

Layout

• Tab label heading (default H3) and Title heading (default H4): H2–H6 or Paragraph.
• Reverse tab direction: tabs run from the other side.
• Display as accordion on mobile: on phones the tabs stack and open like an accordion. Off by default.
• Space between tabs: 0–40px, per screen size.

Tab Bar

• Tab bar position: Top (default) or Bottom (the tabs sit under the pane).
• Overlay the pane's bottom edge (Bottom only): on desktop and tablet the tabs sit on the bottom of the pane, like the tabs along the bottom of a hero photo. The pane's text keeps clear of them. On phones the bar goes under the pane. Tabs with no background of their own get a see-through dark fill, so their words read on the photo (or a light fill if you gave them dark words). The selected tab keeps its Selected Tab & Hover look. Off by default.
• Tab width: Equal (default, the tabs share the full width) or Fit the words (each tab is as wide as its label).
• Tabs sit (Fit the words only): Left (default), Center or Right.
• On phones: One row (default, every tab squeezes into one row), Scroll (the tabs keep their size and the row scrolls sideways; the open pane stays in place) or Stack (one tab per row, then the open pane). Display as accordion on mobile wins over all three.
• The tabs' fill, selected fill, text color and font are in All Tabs and Selected Tab & Hover; the gap is Space between tabs in Layout.

All Tabs

The text style group with background, border and padding (size up to 48px), for every tab.

Selected Tab & Hover

• Text color, Background, Format (Bold, Italic) and Border color for the open tab and the tab under the mouse.

Description Style

• Panel background, Panel padding (0–80px, per screen size), Panel border (0–12px), Panel border color and Panel corner radius (0–48px).
• Title: text style group (no box).
• Description: text style group (no box, size up to 40px).

Button Style

• Button style: Primary or Secondary.
• Reverse button position.

Tab Media

• Each tab's photo or video: Beside the text (default, the classic look; set it up in Image Style) or Pane background (the photo or video fills the tab's pane behind the text).
• With Pane background:
  • Pane height (0 = auto): 0–1200px, per screen size. Default 560px on desktop, 480px on tablet, 420px on phones. 0 makes the pane as tall as its text.
  • Overlay color and Overlay opacity (0–100%, default 35%): a tint over the photo.
  • Put the text on a card: on by default. The title, description and button sit on a card over the photo.
    • Card color (default dark navy) and Card opacity (0–100%, default 55%).
    • Glass blur (0 = off): 0–40px, default 12px. Blurs the photo behind the card.
    • Card padding: 0–120px, per screen size. Default 40px, 24px on phones.
    • Card corner radius: 0–80px, default 16px.
    • Card shadow: None, Soft (default), Medium or Strong.
  • Card max width (0 = full) (or Text max width with no card): 0–1400px, per screen size. Default 560px, and full width on phones.
  • Horizontal position: Left (default), Center or Right, per screen size.
  • Vertical position: Top, Middle (default) or Bottom, per screen size.
  • Text with no color of its own turns white on a dark card or tint (near-black on a light one). The card opacity, overlay opacity and any title or description color you pick are drawn exactly as you set them. When Zeus builds or edits tabs, he picks values that read on any photo.

Image Style

Shown when Tab Media is Beside the text.

• Side-by-side image and text: on by default. Off puts the image above the text.
• Reverse image position.
• Width: 40–900px, per screen size.
• Height (0 = auto): 0–900px, per screen size.
• Corner radius: 0–100px.

Spacing, Animations & Effects

Margin, plus Hover effects, Entrance and Scroll.

List

Item parts: Title and Description (rich text), with an image (and focal point) and a button.

Manage List: Elements

• List title (optional): a heading above the whole list.
• Image element: Image or None.
• Link element: Link (a text link), Button or None.

Layout

• Layout: Image left (default), Image right, Image on top (cards) or Text only.
• Items per row (cards only): 1–6, per screen size. Default 3 on desktop, 2 on tablet, 1 on phones.
• Image width (Image left / right only): 10–100%, per screen size. Default 40%, and 100% on phones.
• Space between items: 0–80px, per screen size. Default 24px.
• Item title heading: H2, H3, H4, H5 or Paragraph. Default H3.
• Items per page: All (no pages) or 2, 3, 4, 5, 6, 8, 10, 12, 16 or 20. Anything other than All adds page numbers under the list.

Item Style

• List title (only when you've set one): text style group, up to 72px.
• Item title: up to 60px. Item description: up to 32px.
• Link (when Link element is Link): text style group. Or Button style Primary / Secondary (when it's Button).

Image

Shown when images are on and the layout isn't Text only.

• Height (0 = natural) (cards only): 0–600px, per screen size. Default 220px.
• Border (0–12px), Border color, Corner radius (0–200px).
• Hover effect (desktop): None, Zoom out, Opacity, Float, Forward, Grayscale, Reverse grayscale, Blur, Blur and grayscale or Shine.

Divider

Not shown in the cards layout.

• Style: Solid (default), Dashed, Dotted or None.
• Thickness: 1–10px. Color.

Frame Style

• Background, Padding (0–80px, per screen size), Border (0–12px), Border color, Corner radius (0–48px).

Pagination

Shown when Items per page isn't All.

• Font size (10–32px), Font color, Disabled font color, Active font color, Active background and Corner radius (0–24px).

Spacing, Animations & Effects

Margin, plus Hover effects, Entrance and Scroll.

Examples

• FAQ for rich results: an Accordion of 6 questions with Enable FAQ schema on, Show first item expanded on, and Title heading H3.
• Service area pages that link back: on the Service Areas dynamic page, an Accordion filled From a collection with Match this dynamic page, and Link mentions to pages on with Services from a collection set to your Services. Each town's FAQ links its main service and your homepage.
• Before/during/after: Tabs with three tabs ("Inspection", "Repair", "Clean-up"), each with a photo Side-by-side, and Display as accordion on mobile on.
• Tabbed hero: Tabs at the top of the home page with four tabs ("Roofing", "Siding", "Gutters", "Storm Damage"), Pane background with a photo per tab, Pane height 640px, the text on a glass card Left / Middle, Tab bar position Bottom with Overlay the pane's bottom edge on, Equal tabs, and On phones set to Scroll.
• Team grid: a List with Image on top (cards), Items per row 4, Link element None, and Zoom out on hover.

Limits and what it can't do

• Items hold text, one image and one button (Tabs can show a video as a pane background). For forms, video players or other widgets inside, use Advanced Accordion or Advanced Tabs.
• Tabs with Pane background use one overlay, card and height for every tab; each tab has its own photo or video and focal point.
• Use FAQ schema on only one accordion per page; Google expects one FAQ list.
• Area names are never linked by Internal links (Service Area FAQ): area pages don't link to other area pages.
• These widgets can't use Connect to Data. Fill them from a collection in the Manage window instead.
• Client people with Widget content can edit items but not the design or display settings that need Editor.

Who can use it

Anyone with the Mount Olympus tool on the agency team. Client people need Editor to add, move or style these widgets, or Widget content to edit the items.

Troubleshooting

• Done is grayed out: two items share an anchor ("Another item already uses this anchor."). Change or clear one.
• The widget is empty after choosing a collection: check Fields (each part needs a field), then Filters and Match this dynamic page, which can hide every item.
• "Links that will be added" says "None yet": the answers don't mention a listed service or the business name, or no service source is set. Check the service names match the words in your answers.
• A word I don't want linked became a link: add it to Never link these words.
• The FAQ doesn't show in Google: FAQ schema helps Google understand the page; Google decides when to show FAQs. Make sure only one accordion per page has it on.
• Tabs are cramped on phones: turn on Display as accordion on mobile, or set On phones (Tab Bar) to Scroll or Stack.
• The words are hard to read on the photo: raise Overlay opacity, or turn on Put the text on a card and raise Card opacity.
• The background video doesn't play: it plays muted once the pane is on screen. Devices set to reduce motion only show the poster, and so do browsers that block autoplay.
• The page numbers don't appear under my list: set Items per page to a number lower than your item count.