Page Builder

Adding an accordion

Add an accordion to put content into panels customers can open one at a time, then fill each panel with your own elements.

2 min read2viewsUpdated 16 September 2026Orbit Support Team
How to build a contact page with a form and map

An accordion is a stack of panels. Each panel has a title, and a customer clicks the title to open it. Use it for delivery details, care instructions or anything long you want to keep tidy. Each panel holds its own elements, so you can put text, images or buttons inside.

Considerations

  • Accordion is in the Advance group. Basic mode hides that group, and search will not find it. Click Pro at the top of the page builder to switch modes.
  • Deleting a panel also deletes everything inside it. Orbit asks you to confirm first.
  • For a plain list of questions and answers, use the FAQ element instead. It also sends your questions to search engines.

Add the element

  1. Open the page in the page builder.
  2. If Basic is selected at the top, click Pro.
  3. In the toolbox on the far left, click Elements.
  4. Open the Advance group and find Accordion, or search for it.
  5. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Accordion.
An Accordion element on the page builder canvas showing collapsed panels with a title and an arrow on each

Add and fill panels

  1. On the Content tab, open Accordion Items.
  2. Click Add Item. A row appears for the new panel.
  3. In Title, type the wording customers click.
  4. Turn on Open by default if you want that panel open when the page loads.
  5. Drag the handle on a row to reorder. Hover over a row for Duplicate item and Delete item.
  6. On the canvas, open the panel and drag elements into it to build its content.

Content settings

  • Accordion Items: the list of panels.
  • Display Mode: Mode is either Accordion (Vertical) or Tabs (Horizontal). Tabs show the same panels side by side.
  • Behavior: Allow Multiple Open lets customers keep more than one panel open at a time, and Animation Duration (ms) sets how fast a panel opens.

Design settings

Open the Design tab to style the accordion. The groups are Container, Layout, Header, Header Title, Content and Icon. Content holds the background colour, padding and border of the open panel. Icon controls the arrow, including how far it turns when a panel opens.

Related guides

Was this helpful?

0 people found this helpful

Keep reading

Related articles