Aedify documentation / Elements

Accordion and tabs

How to build FAQs with Aedify's Accordion element and product details with Tabs: adding and renaming items, putting rows and any element inside them, one-open-at-a-time, the first tab shown, vertical tabs, keyboard support and limits. Both work without JavaScript.

Last updated October 17, 20264 min read

Accordions and tabs fit a lot of content into a little space:

Accordion: a list of titles that open and close, one under another. The usual choice for an FAQ.
Tabs: a row of tab titles, with one panel showing at a time. Good for Details, Shipping and Returns under a product description.

Both are in the Elements group of the palette. They're built from standard HTML and CSS, with no script on your storefront, so they keep working with any theme and load instantly. New to the builder? Start with Using the builder.

What goes inside

Each accordion item and each tab is a container, like a column. It starts with one empty text element, reading Add the answer or details here. in an accordion and Add this tab's content here. in a tab.

You can put anything inside: more text, images, buttons, video, even a whole row with columns. Drag elements into the open item or tab on the canvas, or select the item or tab and click an element in the palette.

Accordion

A new accordion has three items, with the first one open.

On the canvas

Type an item's title right in its title bar. Empty titles read Question or heading.
Click the title bar to select the item and edit what's inside.
Hover over the accordion and click Add item in its toolbar to add another.

Accordion settings

Setting	Default	What it does
Item 1, Item 2 …		Each item's title. The pencil opens the item; the bin removes it. An accordion always keeps at least one item
Add item		Adds an item at the end. Up to 50
One open at a time	Off	Opening an item closes the others

Item settings

Select an item to see its own settings:

Setting	Default	What it does
Title	Empty	The text shoppers click to open the item
Open by default	Off	Open when the page loads. New accordions have the first item open
Icon	None	An icon before or after the title

On your storefront, each title has a + that turns into − when the item is open.

Tabs

A new Tabs element has three tabs: Details, Shipping and Returns.

On the canvas

Click a tab to open it and edit its title and content.
Click + at the end of the tab row (Add tab) to add one.

Tabs settings

Setting	Default	What it does
Tab 1, Tab 2 …	Details, Shipping, Returns	Each tab's title. The pencil opens the tab; the bin removes it. Tabs always keep at least one tab
Add tab		Adds a tab at the end. Up to 10
Layout	Tabs across the top	Tabs across the top, or Tabs down the left (vertical)
Tab shown first	The first tab	The tab that's open when the page loads

With Tabs down the left (vertical), the tabs go back across the top on phones and in narrow rows, where there's no room beside the panel.

Tab settings

Setting	Default	What it does
Tab title	Tab	The text on the tab
Icon	None	An icon before or after the title

You don't need to set anything up:

Accordion: each title is a standard disclosure button. Shoppers reach it with Tab and open or close it with Enter or Space. Screen readers announce whether it's expanded.
Tabs: shoppers Tab into the tab row and switch tabs with the arrow keys. Screen readers announce each tab and its position, such as "Shipping, 2 of 3".

The one thing to get right is the titles. The accessibility check flags an empty one as an error, because the title is what shoppers click:

Issue	Level
Accordion item needs a title: it's the button that opens it.	Error
Tab needs a title: it's the button that shows it.	Error

Accordion or tabs?

	Accordion	Tabs
Best for	Many short, separate answers, such as an FAQ	Two to five related sections, such as product details
On a phone	Works the same as on desktop	The tab row can get crowded past three or four tabs
Several open at once	Yes, unless One open at a time is on	No
Limit	50 items	10 tabs

Tips

Write titles as questions in an FAQ: "How long does shipping take?" Shoppers scan for their question.
Keep tab titles to a word or two. Long titles wrap or crowd the row on phones.
Don't hide what everyone needs. Prices, key details and calls to action belong outside accordions and tabs.
Check the result on your theme. Open the page on your store after saving; your theme's fonts and colours apply to the titles.