A collapsible normally costs you something. Keyboard users cannot reach it, the structured data is missing or duplicated, the colours fight your theme, and the script loads on every page whether you use it or not. Frequently Asked Accordion is one YOOtheme Pro element that does none of that.
Every section below is a live accordion, each one configured differently. Open them.
Minimal Line, Cards, Filled Accent and Frameless. All four read the colour from the YOOtheme customizer through currentColor, so there is no hardcoded hex waiting to clash the day you restyle the site.
The open indicator and the accent line take the colour straight from the YOOtheme customizer, so switching style sheets keeps everything on brand.
Minimal Line is a set of rules with generous spacing. It sits well in an article without shouting.
Accent, heading, content, background and border are real colour pickers with a swatch when you want something specific.
Each header and panel sits in its own surface with a border radius you set yourself.
Cards give a collapsible enough weight to hold its own next to images and grids.
Switch numbering on and the card gets a leading 01, 02, 03.
The open item fills with the accent colour. Good for a step by step where the current step has to be obvious.
Numbering style Badge puts the number in a circle instead of in front of the title.
Switch Multiple Open Items off and opening one closes the rest.
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.
Built to the AA level, not patched towards it afterwards. Try this one with your keyboard only.
Tab reaches the accordion, the arrow keys move between headers, Home jumps to the first and End to the last. Enter and Space open the panel.
Every header is a button with aria-expanded and aria-controls, and every panel points back at its header. No div pretending to be a control.
A visible focus ring on every header, through focus-visible, so mouse users are not bothered by it and keyboard users cannot lose their place.
With prefers-reduced-motion the open animation and the count-up stop. The content still appears, it just does not move.
Text at 4.5:1 and the indicators at 3:1 against their actual background, in both the light and the dark appearance.
Pick the type on the Content tab and the JSON-LD is written for you, in the page language, tied to the page URL. At most one FAQPage per page, so you never end up with two competing blocks when a second accordion joins the layout.
The accordions below carry live How-to and Course markup, and the FAQ at the bottom of this page is the FAQPage. Honest about what that buys you: this makes the page readable for answer engines. Nobody can promise you a rich result.
Upload the zip through Extensions. The plugin enables itself and the element appears in the builder under A YOOzeCase Company.
Choose a style preset, switch numbering on or off and pick the schema type that matches the content.
Add your steps or questions, save the layout, and the structured data is in the page source straight away.
Q&A and FAQ both claim the page itself, and schema.org allows only one of those per URL. The element enforces that for you: whichever comes first in the page wins, the other is left out and the builder tells you why. This page gives that one slot to the FAQ at the bottom, so the Q&A below is shown without its markup. On a real support page you would flip that round.
It is one accordion element that also writes the matching schema.org data for the page.
Presets, colour pickers and the YOOtheme customizer colours keep it on brand without touching CSS.
Full keyboard support, visible focus and correct 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.
The system plugin decides in a handful of lines whether this request has anything to do with it, and steps aside if not.
Plain JavaScript. Nothing is added to the page that your theme was not already loading.
The stylesheet and the script are queued by the element itself, so a page without an accordion carries neither.
It starts when the accordion scrolls into view, counts, and then stops observing.
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.
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 accordion has its own preset, numbering and behaviour, fully independent of the outer one.
You can even nest deeper, although two levels is usually plenty for real content.
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 through 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.
Two ways to reveal a panel, one setting. Both stop moving when the visitor asks for reduced motion.
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 slides its content in from the right. Both respect reduced motion.
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 slides its content in from the right. Both respect reduced motion.
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.
Give an item image a width, a height and a focal point, so a portrait and a landscape shot still line up.
A collapsible is often the last thing a visitor reads before deciding. Give the item somewhere to go.
Each item can carry an optional link, shown as a button below the content.
Pick a primary button, a secondary button or a plain text link for the whole accordion.
Accent, heading, content, background and border are 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.
Every item can override the link text and add its own ARIA label for accessibility.
Point the element at a dynamic source and the items build themselves. The list below is not typed out, it comes from a Joomla category.
Up to 1.6 this element was called A Little Bit Harmonica. Outside the Netherlands that name was not just unknown but misleading, because harmonica means the mouth organ. Version 2.0 renames the product to Frequently Asked Accordion and takes the chance to widen the structured data.
Two search terms instead of one: the FAQ intent and the accordion itself. The element appears in the builder picker as Frequently Asked Accordion, under A YOOzeCase Company.
Mark the questions as speakable so voice assistants know which part of the page is worth reading aloud.
A Q&A block can now name who answered and how many people found it useful, on the question and on each answer.
A how-to can state how long it takes and what you need before you start.
Give an item its own anchor and you can link a visitor straight to that one question from anywhere.
And this is the FAQ itself: the same element, with FAQ schema switched on, live search, a count badge and deep links. One FAQPage for this page, nothing duplicated.
No items match your search.
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 block per page.
No, and nobody can promise that: FAQ markup no longer produces rich results for most sites. What it does is make the page structure readable for search and answer engines.
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.
Joomla 5 and 6, and WordPress 6 and 7, from one shared core. YOOtheme Pro on either platform.
It became this. Version 2.0 is the same element under a name that works outside the Netherlands as well.
We use cookies and similar technologies to improve your experience on our website. Read our Privacy Policy.