Frequently Asked Accordion Demo

Zero collapsible damage.

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.

No layout damage: four presets that take your theme colours

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.

Minimal Line

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.

Cards

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.

Filled Accent

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.

Frameless

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.

No accessibility damage: WCAG 2.1 AA from the first click

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.

No schema damage: FAQ, How-to, Q&A and Course

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.

How-to, with time, supplies and tools

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, for a page that is one single question

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.

Course

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.

No performance damage: nothing loads on pages without an accordion

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.

Numbering that counts up when it scrolls into view

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.

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 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.

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 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.

Open animation: expand or slide

Two ways to reveal a panel, one setting. Both stop moving when the visitor asks for reduced motion.

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 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 slides its content in from the right. Both respect reduced motion.

Any icon, your own SVG, and images that behave

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.

Call-to-action links, in three styles

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.

See the product page

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

Browse extensions

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.

Learn more

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

Open the product page

Pull items straight from your articles or ZOO

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.

See this element in action

New in v2.0: the element got its real name

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.

Frequently asked questions

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.

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.

No settings match your search.

Frequently Asked Accordion YOOtheme Pro

This manual documents Frequently Asked Accordion YOOtheme Pro, version 2.5.0.

Accordion element for the YOOtheme Pro builder with style presets, schema.org (FAQ, How-to, Q&A, Course, Product), optional numbering, deep links, live search and full accessibility.

What's new

2.5.0 (2026-11-02)

Added

Joomla: your license key now works in either of two places: the License tab of the

plugin, or the Download Key under System, Update Sites, as with other extensions. A key entered only under Update Sites is activated by the plugin on the next admin page, so the License tab shows it as active and it is checked every day like a key from the panel.

Changed

Joomla: when a key under System, Update Sites cannot be activated, the License tab says

why: not accepted, expired, no activations left, bought for the other edition, or the license server could not be reached.

Joomla: the help text of the License tab names both places.

2.4.0 (2026-10-30)

Fixed

Joomla: the License tab shows the license panel again, and the Status field shows the status.

Since 2.0.0 Joomla showed a plain text field in their place, so a key could not be activated from the plugin options. After this update you can activate your key there; updates through Joomla need that activation.

A license that expired and was renewed becomes active again by itself, within a day.

Until now the plugin stopped checking after any status other than active, so a renewed key kept updates blocked until it was activated again.

A busy or failing license server no longer locks the license. The status stays as it

was and the plugin asks again later; before, one such answer could block updates for good. A site that is in that state now is checked again after this update.

Deactivate keeps the key on the site when the license server is busy, so you can try

again. Before, the key could disappear while the activation stayed taken.

Entering the same key again no longer uses a second activation. Entering a different

key activates the new one first and only then releases the old one, so a typo does not cost you a working activation.

While the license server cannot be reached, the plugin tries at most once an hour

instead of on every admin page.

Joomla: with System, Caching on, the license panel shows the new status right after

Activate or Deactivate.

A FAQ answer, title or link text linked to Dynamic Content that returns a list or an

object no longer stops the page from rendering. A list is shown as text, anything else is left out.

Changed

The license panel says why the last check failed (for example HTTP 503 or timeout),

and an expired login gets its own message instead of "license server could not be reached". Activate and Deactivate run one at a time, also when you press Enter.

WordPress: tested up to WordPress 7.1, and the update check passes that on in full, so

WordPress 7.1.x lists the update as tested.

WordPress: the license key goes along with the download of an update, as a header,

and only to the update server of this product.

2.3.1 (2026-10-13)

Fixed

Joomla: the License tab works again. Since the rename to Frequently Asked Accordion the

Activate, Deactivate and status calls from the plugin options went to an endpoint that no longer listened, so a key entered on Joomla was never activated and the update site never received the download key. Sites that activated before 2.0.0 were not affected.

Security

Joomla: the license status endpoint now requires an administrator and a valid form

token, like Activate and Deactivate already did. It was readable without logging in.

Joomla: the stored license key no longer appears in the HTML of the plugin options.

The field shows the last four characters only; the key itself is kept in the database when the options are saved.

Changed

Contact address for support and security reports is This email address is being protected from spambots. You need JavaScript enabled to view it. on both

platforms (manifest, SECURITY.txt, README).

2.3.0 (2026-10-05)

Added

Find in page opens closed answers. Search the page with Ctrl+F (or Find in page on a phone)

and the browser now finds text in closed items too and opens the item it lands on, with the same link, remembered state and open event as a click. Works in Chrome, Edge and Firefox; other browsers keep the old behavior. Not in the horizontal layout.

A link can open the page with the search filled in: add ?faq= and the search term to the

page address, for example /faq?faq=refund. Support can point to a topic instead of a single question. Needs Search Field.

Changed

Search ignores accents and word order. "cafe" finds "Café", and "refund days" finds "How many days

do I have for a refund?". Every word must occur in the item, and each word is marked where it is found.

Security impact

None. The ?faq= value only goes into the search field, never into the page as HTML.

Migration impact

None. No database change and no new settings.

2.2.0 (2026-10-04)

Updates now need an active license key. This release itself still reaches every site; from the next release on, a site installs an update only while its key is active. Activate your key under the plugin settings (Joomla: System, Plugins, Frequently Asked Accordion, tab License; WordPress: Settings, Frequently Asked Accordion YOOtheme Pro). The element keeps working without a key, on the version that is installed.

Added

Copy Link Button (Settings, Linking & Scrolling). Every opened item gets a Copy link button

that copies the page address with the item's anchor, so a support team can paste a link to one answer. Needs Deep Link Items. Where the browser does not allow copying, the link is put in the address bar instead.

Search highlights what it finds. Matches in the titles and answers are marked, and when exactly

one item matches it opens.

No Results Text and No Results Link (Settings, Toolbar). A search that finds nothing can show

your own text and a link, for example to your contact page.

Analytics Events (Settings, Analytics, off by default). Opening and closing an item, searching

and copying a link are pushed to the dataLayer that is already on the page, so Google Tag Manager or Matomo Tag Manager can count them. The plugin loads no tracking script and sends nothing itself. The accordion also fires DOM events (ycaccordion:open, ycaccordion:close, ycaccordion:search, ycaccordion:copy) for your own scripts, whether this is on or off.

Help text on every setting of the element that had none, sixteen in total.

Changed

Updates are installed only with an active license key. On Joomla the plugin hands the key to

Joomla's own download key for this update site; without it Joomla shows "The Download Key is missing". On WordPress the update is listed with a line that says the key is needed and links to the license screen.

The license is checked once a day while an administrator uses the backend (Joomla) or by the

daily scheduled task (WordPress). Until now a Joomla site checked only at activation.

The license check sends the versions of the plugin, the CMS, PHP and YOOtheme Pro along, so we

can see which versions are in use. Nothing about visitors is sent. NOTICE.txt describes it.

The status on the plugin settings page is measured: it says whether YOOtheme Pro is actually

active on the site, instead of a fixed sentence.

WordPress: a new version shows up within the hour, and right away after "Check again" on

Dashboard, Updates. It could take twelve hours before.

The element icon in the builder picker is navy instead of violet. The violet was almost the same

as the one of another A YOOzeCase Company element, so the two were hard to tell apart.

Fixed

WordPress showed every text in English, whatever the site language. The translation files used

the internal keys where WordPress looks for the English text. All six languages work now.

A key bought for the other edition (Joomla or WordPress) now gets its own clear message, in all

six languages, instead of a general error. The same goes for an expired session and missing rights.

Deactivating while the license server cannot be reached no longer clears the key on the site.

The key is still in use on the server side, and the screen now says so.

After activating, saving the plugin settings no longer puts the old license status back.
The notice shown after updating from A Little Bit Harmonica said its layouts had to be rebuilt.

They keep working since 2.0.2; the notice says so now.

Joomla kept the old name of the update site record after an update. It is now set to

"Frequently Asked Accordion Updates".

A database error while enabling the plugin during installation now gives a message instead of

an error page.

Security impact

None. The license call gains four version fields. No new endpoint; the copy, highlight and event code writes only text nodes and never HTML.

Migration impact

None. No database change. New settings start off. An existing license activation stays valid and is handed to the update site during this update.

Plugin settings

Basic

Status #

Where to find it Plugin settings › Basic › Status

Shows whether YOOtheme Pro is active on this site, measured when this page opens. The element only appears in the builder when it is; nothing else has to be set up here.

Type: ycfrequentlyaskedaccordionstatus
Default: Not set

Debug mode #

Where to find it Plugin settings › Basic › Debug mode

Enables verbose logging for support purposes. Keep disabled on production sites.

Type

radio

Default

No

Options

Yes 1
No 0

License

License key #

Where to find it Plugin settings › License › License key

Enter your A YOOzeCase Company license key here and click Activate, or enter it once as Download Key under System, Update Sites: the plugin then activates it for this site on the next admin page. The element works without a key; updates are only installed while the key is active on this site.

Type: ycfrequentlyaskedaccordionlicense
Default: Not set

Frequently Asked Accordion

Content

Items #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Items

The items of the accordion. Add, reorder or remove them here; each item has a title and either text or a sublayout. Numbering, the count badge and the schema follow the list automatically.

Type: content-items
Default: Not set

Schema.org Type #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Schema.org Type

Adds JSON-LD structured data. FAQ: each item becomes a Question. How-to: each item becomes a step (with optional time, supplies and tools). Q&A: one question with the items as answers. Course: the items become syllabus sections. Product: the product fields below describe the product and each item becomes a specification (title as name, content as value). Make sure the visible content matches the schema. The markup helps AI answer engines, voice and non-Google search; note that Google no longer shows FAQ rich results (since May 2026) or How-to rich results (since 2023), so do not expect a Google snippet from those.

Type

select

Default

None

Options

None none
FAQ (FAQPage) faq
How-to (HowTo) howto
Q&A (QAPage) qapage
Course course
Product product

How-to Name #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › How-to Name

Required for the HowTo schema: the name of the task being explained.

Type: text
Default: Not set

Q&A Question #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Q&A Question

The single question this page answers. The items become its answers; the first item is the accepted answer. Note: Google intends QAPage for community pages where visitors post answers; for editorial FAQ use the FAQ type instead.

Type: text
Default: Not set

How-to Total Time #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › How-to Total Time

Optional ISO 8601 duration, e.g. PT30M (30 min) or PT1H30M.

Type: text
Default: Not set

How-to Supplies #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › How-to Supplies

Optional materials, one per line. Added as HowToSupply.

Type: textarea
Default: Not set

How-to Tools #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › How-to Tools

Optional tools, one per line. Added as HowToTool.

Type: textarea
Default: Not set

Course Name #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Course Name

Required for the Course schema.

Type: text
Default: Not set

Course Description #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Course Description

Required for the Course schema: a short description of the course.

Type: textarea
Default: Not set

Course Provider #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Course Provider

Required for the Course schema: the organisation that offers the course.

Type: text
Default: Not set

Product Name #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Product Name

Required for the Product schema: the name of the product as shown on the page.

Type: text
Default: Not set

Product Description #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Product Description

A short description of the product in plain text.

Type: textarea
Default: Not set

Product Image #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Product Image

The main product image. Search engines use it in product results.

Type: image
Default: Not set

Product Brand #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Product Brand

The brand or maker of the product.

Type: text
Default: Not set

Product SKU #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Product SKU

Your own unique product code. Keep it the same across updates so search engines recognise the product.

Type: text
Default: Not set

Price #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Price

The price exactly as the visitor sees it on this page, digits only, e.g. 49.00. Leave empty when the page shows no price; the offer is then left out of the schema, because a price that is not on the page counts as misleading markup.

Type: text
Default: Not set

Currency #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Currency

Three-letter currency code, e.g. EUR or USD. Default EUR.

Type: text
Default: Not set

Price Includes VAT #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Price Includes VAT

Tick when the price shown includes VAT. Search engines use this to compare prices correctly.

Type: checkbox
Default: Not set

Availability #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Availability

Whether the product can be bought right now. Default In stock.

Type

select

Default

In stock

Options

In stock InStock
Out of stock OutOfStock
Pre-order PreOrder
Discontinued

Average Rating #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Average Rating

Average review score on a scale of 1 to 5, e.g. 4.6. Only fill this in when the rating is also visible on this page; a rating that only exists in the schema can get the page a manual penalty from Google.

Type: text
Default: Not set

Number of Ratings #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Number of Ratings

How many reviews the average rating is based on. Leave empty or 0 when there are none; the rating is then left out.

Type: text
Default: Not set

Speakable (voice / AEO) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Speakable (voice / AEO)

Marks the titles and answers as speakable so voice assistants and AI engines can read them aloud. Adds a SpeakableSpecification to the FAQ or How-to schema.

Type: checkbox
Default: Not set

Last Modified Date #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Last Modified Date

Adds a dateModified to the schema so answer engines see how fresh the content is. Leave it empty to use the modified date of the article or post this layout is on; that date updates by itself every time you save the page. Pick a date only to show a different one. Added to FAQ, How-to, Q&A and Course; a Product has no modified date in schema.org.

Type: datetime
Default: Not set

Question Author #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Question Author

Optional. Name of the person who asked the question. Google lists author as a recommended field for Q&A content.

Type: text
Default: Not set

Question Upvotes #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content › Question Upvotes

Optional. Number of upvotes the question received. Left empty when your site has no voting.

Type: number
Default: Not set

None
Muted muted
Emphasis emphasis
Primary primary
Secondary secondary
Success success
Warning warning
Danger danger

Icon Custom Color #

Where to find it YOOtheme builder › Frequently Asked Accordion › Style › Icon Custom Color

Any color for the open/close icon, used only when Icon Color is None. Leave empty to use the accent color.

Type: color
Default: Not set

Title Element #

Where to find it YOOtheme builder › Frequently Asked Accordion › Style › Title Element

The HTML element of the item titles, for the page outline and search engines. It does not change the look; use Title Style for that, so you can keep an h3 in the outline and still make it look like an h4. Default h3. Each item can override it.

Type

select

Default

h3

Options

Title Style #

Where to find it YOOtheme builder › Frequently Asked Accordion › Style › Title Style

How the item titles look, independent of their HTML element. The options come from your YOOtheme theme: Heading H4 looks like an h4 while the element stays what you set above. None keeps the accordion's own title styling. Each item can override it.

Type

select

Default

Not set

Options

None
Text Meta text-meta
Text Lead text-lead
Text Small text-small
Text Large text-large
Heading 3X-Large heading-3xlarge
Heading 2X-Large heading-2xlarge
Heading X-Large heading-xlarge
Heading Large heading-large
Heading Medium heading-medium
Heading Small heading-small
Heading H1 h1
Heading H2 h2
Heading H3 h3
Heading H4 h4
Heading H5 h5
Heading H6 h6

YOOtheme Icon #

Where to find it YOOtheme builder › Frequently Asked Accordion › Style › YOOtheme Icon

Pick an icon from the YOOtheme library to use as the open/close indicator.

Type: icon
Default: Not set

Custom Icon (SVG) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Style › Custom Icon (SVG)

Upload an SVG to use as the open/close indicator. It rotates on open.

Type: image
Default: Not set

Frequently Asked Accordion

Multiple Open Items #

Where to find it YOOtheme builder › Frequently Asked Accordion › Multiple Open Items

Allow more than one item to be open at the same time.

Type: checkbox
Default: Not set

Collapsible #

Where to find it YOOtheme builder › Frequently Asked Accordion › Collapsible

Allow closing the open item so all items can be closed.

Type: checkbox
Default: 1

First Item Open #

Where to find it YOOtheme builder › Frequently Asked Accordion › First Item Open

Open the first item on page load.

Type: checkbox
Default: Not set

Deep Link Items #

Where to find it YOOtheme builder › Frequently Asked Accordion › Deep Link Items

Each item gets its own #anchor. Opening such a link expands the item; toggling an item updates the URL.

Type: checkbox
Default: Not set

Scroll to Opened Item #

Where to find it YOOtheme builder › Frequently Asked Accordion › Scroll to Opened Item

Smoothly scroll the opened item into view.

Type: checkbox
Default: Not set

Scroll Offset (px) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Scroll Offset (px)

Offset in pixels for sticky headers, e.g. 80.

Type: text
Default: Not set

Remember Open Items #

Where to find it YOOtheme builder › Frequently Asked Accordion › Remember Open Items

Store the open items in the visitor's browser (localStorage) and restore them on the next visit.

Type: checkbox
Default: Not set

Search Field #

Where to find it YOOtheme builder › Frequently Asked Accordion › Search Field

Live search field above the accordion. It filters items by title and content, ignores accents and word order, and marks what it finds. To link to a filled search, add ?faq= and the search term to the page address.

Type: checkbox
Default: Not set

Search Placeholder #

Where to find it YOOtheme builder › Frequently Asked Accordion › Search Placeholder

Text inside the empty search field, e.g. 'Search the questions'. Leave empty for the translated default 'Search...'.

Type: text
Default: Not set

Expand/Collapse All Button #

Where to find it YOOtheme builder › Frequently Asked Accordion › Expand/Collapse All Button

Button above the accordion that opens or closes all items at once.

Type: checkbox
Default: Not set

Numbering #

Where to find it YOOtheme builder › Frequently Asked Accordion › Numbering

Automatically number the items. Numbers update when items are added, removed or reordered.

Type: checkbox
Default: Not set

Numbering Style #

Where to find it YOOtheme builder › Frequently Asked Accordion › Numbering Style

Plain shows 1, 2, 3. Padded shows 01, 02, 03 and keeps the titles aligned past nine items. Badge puts the number in a circle in front of the title.

Type

select

Default

Padded (01, 02, 03)

Options

Plain (1, 2, 3) plain
Padded (01, 02, 03) padded
Badge (circled) badge

Count-up Animation #

Where to find it YOOtheme builder › Frequently Asked Accordion › Count-up Animation

Numbers count up when the accordion scrolls into view. Disabled automatically for visitors who prefer reduced motion.

Type: checkbox
Default: Not set

Item Count Badge #

Where to find it YOOtheme builder › Frequently Asked Accordion › Item Count Badge

Badge above the accordion showing the number of items.

Type: checkbox
Default: Not set

Badge Text #

Where to find it YOOtheme builder › Frequently Asked Accordion › Badge Text

Use {n} as placeholder for the number, e.g. '{n} questions'.

Type: text
Default: {n}

Badge Text (Singular) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Badge Text (Singular)

Text when exactly one item is shown, e.g. '{n} question'. Leave empty to reuse the badge text.

Type: text
Default: Not set

Link Text (default) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Link Text (default)

Default text for the call-to-action link on items that have one. Each item can override it. Leave empty to use the built-in 'Read more' (translated).

Type: text
Default: Not set

Link Style #

Where to find it YOOtheme builder › Frequently Asked Accordion › Link Style

How the call-to-action link is shown: a primary button, a secondary button or a plain text link.

Type

select

Default

Button (primary)

Options

Button (primary) primary
Button (secondary) default
Text link text

Accent Color #

Where to find it YOOtheme builder › Frequently Asked Accordion › Accent Color

Overrides the accent (the built-in accent is used when left empty), e.g. #1e62d0.

Type: color
Default: Not set

Heading Text Color #

Where to find it YOOtheme builder › Frequently Asked Accordion › Heading Text Color

Text color of the item titles. Leave empty to follow the preset and the Appearance setting. Keep a contrast of at least 4.5:1 against the heading background.

Type: color
Default: Not set

Heading Background #

Where to find it YOOtheme builder › Frequently Asked Accordion › Heading Background

Background of the item headers. Leave empty for the preset's own background. With Filled Accent the open header always takes the accent color.

Type: color
Default: Not set

Content Text Color #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content Text Color

Text color of the opened panels. Leave empty to follow the preset and the Appearance setting. Keep a contrast of at least 4.5:1 against the content background.

Type: color
Default: Not set

Content Background #

Where to find it YOOtheme builder › Frequently Asked Accordion › Content Background

Background of the opened panels. Leave empty for the preset's own background.

Type: color
Default: Not set

Border Color #

Where to find it YOOtheme builder › Frequently Asked Accordion › Border Color

Color of the dividers (Minimal Line) and borders (Filled Accent, search field). Leave empty to follow the preset. Frameless and Cards draw no borders.

Type: color
Default: Not set

Border Radius (px) #

Where to find it YOOtheme builder › Frequently Asked Accordion › Border Radius (px)

Corner rounding in pixels, used by Cards and Filled Accent, e.g. 12. Leave empty for the default of 12. Minimal Line and Frameless have no corners to round.

Type: text
Default: Not set

css #

Where to find it YOOtheme builder › Frequently Asked Accordion › css

Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>

Type: editor
Default: Not set

Copy Link Button #

Where to find it YOOtheme builder › Frequently Asked Accordion › Copy Link Button

Adds a small Copy link button at the bottom of every opened item. It copies the page address with the item's anchor, so a support team can paste a link to one answer. Works together with Deep Link Items, which it needs.

Type: checkbox
Default: Not set

No Results Text #

Where to find it YOOtheme builder › Frequently Asked Accordion › No Results Text

Shown when a search finds nothing, e.g. 'Your question is not listed? Ask us directly.' Leave empty for the translated default 'No items match your search.'

Type: text
Default: Not set

No Results Link #

Where to find it YOOtheme builder › Frequently Asked Accordion › No Results Link

Optional link shown under the no-results text, e.g. your contact page, so a search that finds nothing is not a dead end.

Type: link
Default: Not set

No Results Link Text #

Where to find it YOOtheme builder › Frequently Asked Accordion › No Results Link Text

Text of that link, e.g. 'Contact us'. Leave empty to use the default call-to-action text.

Type: text
Default: Not set

Analytics Events #

Where to find it YOOtheme builder › Frequently Asked Accordion › Analytics Events

Pushes opening and closing an item and searching to the dataLayer already on the page (Google Tag Manager, Matomo Tag Manager), including the search text. The plugin loads no tracking script and sends nothing itself. Off by default: consent and your cookie banner stay with the tag manager that reads the dataLayer.

Type: checkbox
Default: Not set

Item

Content

Title #

Where to find it YOOtheme builder › Item › Content › Title

The question or step as shown in the header. Also used as the question in the schema and to build the item's anchor.

Type: text
Default: Not set

Content Type #

Where to find it YOOtheme builder › Item › Content › Content Type

Text uses the editor below. Sublayout lets you build the answer with any builder element; then fill Schema Text, because a sublayout has no plain text for the schema.

Type

select

Default

Not set

Options

Text text
Sublayout (Builder) layout

Content #

Where to find it YOOtheme builder › Item › Content › Content

The answer or explanation shown when the item opens. Its plain text also goes into the schema, so keep what the page shows and the answer the same.

Type: editor
Default: Not set

Schema Text #

Where to find it YOOtheme builder › Item › Content › Schema Text

Plain-text answer used in the schema.org data when the content is a sublayout. Leave empty to exclude this item from the schema.

Type: textarea
Default: Not set

Image #

Where to find it YOOtheme builder › Item › Content › Image

Optional image shown above the item content.

Type: image
Default: Not set

Image Alt #

Where to find it YOOtheme builder › Item › Content › Image Alt

Describes the image for screen readers and search engines. Leave empty only when the image is purely decorative.

Type: text
Default: Not set

Image Width #

Where to find it YOOtheme builder › Item › Content › Image Width

Setting just one of width/height keeps the original proportions. The image is resized and cropped server-side, with high-resolution versions auto-generated where possible.

Type: number
Default: Not set

Image Height #

Where to find it YOOtheme builder › Item › Content › Image Height

Height in pixels. Setting just one of width/height keeps the proportions; setting both crops around the focal point.

Type: number
Default: Not set

Image Focal Point #

Where to find it YOOtheme builder › Item › Content › Image Focal Point

Controls how the image is cropped when both width and height are set.

Type

select

Default

Not set

Options

Top Left top-left
Top Center top-center
Top Right top-right
Center Left center-left
Center Center
Center Right center-right
Bottom Left bottom-left
Bottom Center bottom-center
Bottom Right bottom-right

Link #

Where to find it YOOtheme builder › Item › Content › Link

Optional call-to-action link shown below the item content, e.g. a link to the full article.

Type: link
Default: Not set

Link Text #

Where to find it YOOtheme builder › Item › Content › Link Text

Overrides the element-wide link text for this item. Leave empty to use the element default.

Type: text
Default: Not set

Link ARIA Label #

Where to find it YOOtheme builder › Item › Content › Link ARIA Label

Accessible label for the link when the visible text is not descriptive enough on its own.

Type: text
Default: Not set

Settings

Anchor #

Where to find it YOOtheme builder › Item › Settings › Anchor

Custom #anchor for deep linking. Leave empty to generate one from the title.

Type: text
Default: Not set

Initially Open #

Where to find it YOOtheme builder › Item › Settings › Initially Open

Open this item on page load.

Type: checkbox
Default: Not set

Title Element #

Where to find it YOOtheme builder › Item › Settings › Title Element

Overrides the title element of the accordion for this item only. Inherit uses the setting on the accordion.

Type

select

Default

Not set

Options

Inherit
h1
h2
h3
h4
h5
h6
div

Title Style #

Where to find it YOOtheme builder › Item › Settings › Title Style

Overrides the title style of the accordion for this item only. Inherit uses the setting on the accordion, None removes the style for this item.

Type

select

Default

Not set

Options

Inherit
None none
Text Meta text-meta
Text Lead text-lead
Text Small text-small
Text Large text-large
Heading 3X-Large heading-3xlarge
Heading 2X-Large heading-2xlarge
Heading X-Large heading-xlarge
Heading Large heading-large
Heading Medium heading-medium
Heading Small heading-small
Heading H1 h1
Heading H2 h2
Heading H3 h3
Heading H4 h4
Heading H5 h5
Heading H6 h6

Answer Author #

Where to find it YOOtheme builder › Item › Settings › Answer Author

Optional, Q&A Page schema only. Name of the person who wrote this answer.

Type: text
Default: Not set

Answer Upvotes #

Where to find it YOOtheme builder › Item › Settings › Answer Upvotes

Optional, Q&A Page schema only. Number of upvotes this answer received.

Type: number
Default: Not set

Item

sublayout #

Where to find it YOOtheme builder › Item › sublayout

The builder content of this item when Content Type is Sublayout. Open it with the button that appears on the item.

Type: builder-fragment
Default: Not set

Frequently Asked Accordion Demo

Zero collapsible damage.

No layout damage: four presets that take your theme colours

Minimal Line

Reads your theme colour

A quiet divider look

Or override it by hand

Cards

01 Every item is a card

02 Works on a busy page

03 Numbering fits naturally

Filled Accent

1 A solid accent bar

2 Badge numbers

3 One item at a time

Frameless

Calm and editorial

Remembers the visitor choice

Print friendly

No accessibility damage: WCAG 2.1 AA from the first click

Arrow keys, Home and End

Screen readers get the real roles

Focus you can actually see

Reduced motion is respected

Contrast that holds up

No schema damage: FAQ, How-to, Q&A and Course

How-to, with time, supplies and tools

1 Install the plugin

2 Pick a preset and your options

3 Fill the items and publish

Q&A, for a page that is one single question

What does Frequently Asked Accordion do?

Can I style it to match my site?

Is it accessible?

Course

01 Install the plugin

02 Add and configure items

03 Publish with structured data

No performance damage: nothing loads on pages without an accordion

Early return on every request

No jQuery, no framework

CSS and JS only where the element is

The count-up runs once

Numbering that counts up when it scrolls into view

01 Add items in the builder

02 Count-up on scroll

03 Full sublayouts per item

Nested sub-items: open the main item

01 A regular main item

02 Open me to reveal the sub-items

1 Sub-item one

2 Sub-item two

3 Sub-item three

Horizontal orientation

1 Install the plugin

2 Pick orientation

3 Open to the side

Open animation: expand or slide

Expand (down)

01 Open me

02 And me too

03 Compare both sides

Slide from right

01 Open me

02 And me too

03 Compare both sides

Any icon, your own SVG, and images that behave

1 Use any YOOtheme icon

2 Or upload your own SVG

3 Images with a size and a focal point

Call-to-action links, in three styles

Add a call-to-action to any item

Three link styles

Styled with the colour pickers

Or a subtle text link

Per-item override

Pull items straight from your articles or ZOO

1 HootBox Demo

2 Quiz Whizz Demo

3 Wow, Handshakable Downloads Demo