Accordion
Collapsible items that can hold any widgets, with optional FAQ structured data.
On this page
The Accordion shows a list of titles that open and close to reveal more content. Use it for FAQs, service details or anything long that visitors can scan first. Each item's panel is a container, so it can hold any widgets: text, images, buttons, even a form.
Add an accordion
Insert it
Open Insert in the left panel, find Accordion under Layout (or type
accordionin Search widgets) and click it or drag it onto the canvas. It starts with three items.Write the titles
In Content → Accordion → Items, click an item and type its Title. Add item adds one; drag the handle to reorder, or use Duplicate item and Delete item. The panels on the canvas follow.
Fill the panels
Drop widgets into the open panel on the canvas. To work on another item, select its panel container in Layers (or anything inside it): that item opens on the canvas.
Set the behaviour
Choose whether the First item open and whether visitors may Allow several open items.
Build an FAQ section
For questions and answers, set Title HTML tag to a heading level that fits the page (usually H3 under an H2 section title) and turn on FAQ schema. Urmi then adds FAQPage structured data built from the titles and the text in the panels, so search engines can show them as questions and answers. Use it once per page, and only for real questions and answers.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing).
Content tab
| Setting | What it does |
|---|---|
| Items | The list of items. Each item has a title here and a panel (a container) on the canvas. Add item, drag to reorder, Duplicate item and Delete item keep the panels in step. |
| Title HTML tag | The HTML tag of the titles. Choose a heading level (for example H3) when the titles are questions in a FAQ section. |
| First item open | Opens the first item when the page loads. On by default. |
| Allow several open items | Lets several items stay open. When off, opening one item closes the others. |
| Icon | Icon shown on closed items. |
| Active icon | Icon shown on the open item. With no icon, the closed icon turns upside down when the item opens. |
| Icon position | Puts the open/close icon at the start or the end of the title. Options: Start, End. Default: End. |
| Animation duration (ms) | How long opening and closing takes, in milliseconds. Visitors who prefer reduced motion get no animation. Default: 300. |
| FAQ schema | Adds FAQPage structured data built from the titles and the text of the panels, so search engines can show them as questions and answers. Use it once per page, for real questions and answers. |
| Setting | What it does |
|---|---|
| Title | The clickable title of the item. |
| Icon | An optional icon in front of this title. |
Design tab
| Setting | What it does |
|---|---|
| Space between items | Space between the items. Per device. |
| Background | Background of each item. |
| Border | Border of each item. |
| Open item border color | Border color of the open item. |
| Border radius | Rounds the corners of each item. Per device. |
| Shadow | Shadow of each item. |
| Setting | What it does |
|---|---|
| Typography | Text style or font, size and weight of the titles. |
| Padding | Space inside the title bar. Per device. |
| Alignment | Aligns the titles. Options: Left, Center, Right. Per device. |
| Normal › Color | Color of the titles. |
| Normal › Background | Background color of the title bar. |
| Hover › Color | Color of a title on hover. |
| Hover › Background | Background color of the title bar on hover. |
| Open › Color | Color of the open item’s title. |
| Open › Background | Background color of the open item’s title bar. |
| Setting | What it does |
|---|---|
| Size | Size of the open/close icon. Per device. |
| Spacing | Space between the icon and the title. |
| Color | Color of the open/close icon. |
| Open color | Color of the icon on the open item. |
| Item icons › Size | Size of the icons set on single items. |
| Item icons › Color | Color of the icons set on single items. |
| Setting | What it does |
|---|---|
| Background | Background of the panels. |
| Padding | Space inside the panels. Per device. |
| Border | Border of the panels. |
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Accessible by default. Items are built on native disclosure elements: they work with the keyboard (Tab to a title, Enter or Space to open), work without JavaScript, and the browser's find-in-page can open a closed item that contains the searched text.
- Keep titles short. One line per title scans best, especially on phones.
- Motion. Opening and closing animates for Animation duration (ms); visitors who prefer reduced motion get no animation.
- Use Tabs for side-by-side choices. When visitors compare options, Tabs can work better; a Tabs widget can also switch to an accordion layout on mobile.