Skip to main content

Minimal Line with FAQ schema, search and badge

4 questions

An accordion element for the YOOtheme Pro builder with style presets, schema.org structured data, automatic numbering and live search. Built by A YOOzeCase Company.

Pick the FAQ schema type on the Content tab. Every question and answer is added to the page as JSON-LD automatically, with at most one FAQ schema per page.

Yes. With deep links every item gets its own anchor. Opening such a link expands the right item and smoothly scrolls it into view.

Fully. Arrow keys, Home and End move between the headers, and every panel carries the proper aria attributes for screen readers.

Cards with 01 numbering and count-up

Demo image inside an accordion item

Add, reorder or remove items: the numbering always stays correct automatically.

The numbers visibly count up as soon as the accordion scrolls into view. Visitors who prefer reduced motion see the final number right away.

Besides text, every item can hold a complete builder fragment: grids, images, buttons, anything the builder can do.

Filled Accent with HowTo schema and badge numbers

Upload the zip via Extensions and the plugin enables itself. The element appears in the builder under A YOOzeCase Company right away.

Select a style preset, switch the numbering on or off and choose the schema type that fits the content.

Add your steps or questions, save the layout and the structured data is in the page source immediately.

Frameless with plus icon left and remember

No frames, larger typography and a soft hover tint. Beautiful on landing pages with plenty of whitespace.

The last opened item is stored in the browser and reopened automatically on the next visit.

When printing, all items expand automatically and the controls disappear.

Nested sub-items: open the main item

This one holds plain text, to show both content types side by side.

Sub-items live inside a sublayout and only appear when the main item is opened.

The nested harmonica has its own preset, numbering and behavior, fully independent of the outer one.

You can even nest deeper, although two levels is usually plenty for real content.

Pull items straight from your articles or ZOO

11 items

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Repeat placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

New in v0.9: open animation

Pick how items reveal their content: Expand (down) or Slide from right. The live search also debounces now, and the search placeholder color follows the Light or Dark appearance.

Expand (down)

Watch how this panel reveals its content. This is the Expand (down) animation.

Each item uses the same animation. The choice is one setting on the element, under Style.

The left column expands downward; the right column also slides its content in from the right. Both respect reduced-motion.

Slide from right

Watch how this panel reveals its content. This is the Slide from right animation.

Each item uses the same animation. The choice is one setting on the element, under Style.

The left column expands downward; the right column also slides its content in from the right. Both respect reduced-motion.

New in v0.10: horizontal orientation

The whole accordion turned a quarter turn: vertical title bars side by side, the open panel slides out to the right. Click the bars below.

Upload the zip via Extensions and the plugin enables itself. The element appears in the builder under A YOOzeCase Company.

Set Orientation to Horizontal on the Style tab. The items turn into side-by-side bars with vertical titles.

Clicking a bar reveals its panel to the right. On phones it falls back to the normal vertical layout.

New in v1.1: pick any icon, sized images and more schema

Three new things in 1.1: pick any icon from the YOOtheme library (or upload your own SVG) as the open and close indicator, set a clean size for item images, and mark content up as Q&A or Course on top of FAQ and How-to.

Pick any icon from the YOOtheme library as the open and close indicator.

Drop in a brand icon and it rotates on open just like the built-ins.

Set a width per item image, and mark content up as Q&A or Course on top of FAQ and How-to.

New in v1.2: call-to-action links, colour pickers and more schema

Version 1.2 adds a call-to-action link to any item, real colour pickers for the fine-tuning, and Q&A and Course structured data on top of FAQ and How-to.

Each item can carry an optional link, shown as a button below the content.
See the harmonica

Pick a primary button, a secondary button or a plain text link for the whole accordion.
Browse extensions

The accent, heading and content colours are now colour pickers with a swatch; this accordion uses a custom purple accent.

Set the link style to Text for an underlined link instead of a button.
Learn more

Every item can override the link text and add its own ARIA label for accessibility.
Open the product page

It is one accordion element that also outputs the matching schema.org data.

Presets, colour pickers and the YOOtheme customizer colours keep it on-brand.

Full keyboard support, focus states and ARIA come built in.

Upload the zip; the element appears in the builder under A YOOzeCase Company.

Pick a preset, switch on numbering and choose the schema type that fits.

Save the layout and the Course JSON-LD is in the page automatically.