--- title: "Frequently Asked Accordion | FAQ Element for YOOtheme Pro Sites" description: "Build smart accordions in YOOtheme Pro with style presets, FAQ and HowTo schema, numbering, live search, collections and WCAG 2.1 AA accessibility support." url: "https://www.yoozecase.com/?item_id=17" date: "2026-09-28T02:51:10+00:00" language: "en-GB" --- # Frequently Asked Accordion Zero collapsible damage! **Latest Version** 2.0.2 **Requires** Joomla 5, 6, PHP 8.1 or newer **Release date** 09 August 2026 **Made for** Yootheme Pro, Joomla, Wordpress **Price** โ‚ฌ25.00 (incl. 6 months of updates) [ ๐Ÿ›’ Get it for Joomla ๐Ÿ‘ ](https://yoozecase.lemonsqueezy.com/checkout/buy/3dbb327d-eef2-475c-965a-62a5cb040d70) [ ๐Ÿ›’ Get it for WordPress๐Ÿ‘ ](https://yoozecase.lemonsqueezy.com/checkout/buy/0e929a2b-779f-49d0-85b5-db131b64b2a5) [ Demo page ](https://www.yoozecase.com/frequently-asked-accordion-demo) YOOtheme Pro Best Accordion Element &, FAQ Plugin. Don't ask. Just install! ## What's new in version 2.0.2 - **Fixed:** Layouts built before the rename kept the old element names and rendered nothing after upgrading: the accordion vanished from the page without a warning, schema markup included. The old names are registered again as hidden aliases, so those layouts render exactly as before. Nothing to migrate, and the element picker still lists one entry. ![Frequently Asked Accordion 1](https://www.yoozecase.com/files/frequently-asked-accordion_1.png) ![Frequently Asked Accordion Example](https://www.yoozecase.com/files/frequently-asked-accordion-example.png) [](#) [](#) --- ## Description A smart accordion element for the YOOtheme Pro builder with style presets, [schema.org](http://schema.org) structured data, automatic numbering and live search. No need for a random normal harmonica anymore. Create beautiful accordions in YOOtheme Pro with style presets, FAQ &, HowTo schema, live search, collection support, WCAG 2.1 AA accessibility and multilingual support. - Accordion element for the YOOtheme Pro builder. - Style presets (minimal line, cards, filled accent, frameless), light/dark - schema.org JSON-LD: FAQPage or HowTo, with one-FAQ-per-page guard. - Optional numbering with count-up, item-count badge, live search, expand or - Multiple-items repeat from any collection source (Joomla articles, ZOO 4) - WCAG 2.1 AA: keyboard, focus-visible, aria, reduced-motion, AA contrast. - Six base languages with key parity, license layer with graceful gateway   ## Feature request ### What is the next feature for this plugin? Submit your idea or vote on existing ones. #### Top voted Website (leave empty) '; } html += ''; if (oc.title) { html += '##### ' + escapeHtml(oc.title) + ' '; } if (oc.text) { html += '' + escapeHtml(oc.text).replace(/\\n/g, ' ') + ' '; } html += ' '; } // Auto winner(s) - top N from the already vote-sorted features if (mode === 'auto_winner' || mode === 'both') { var n = oc.winnerCount | 0; if (n '; for (var i = 0; i ' + (w.image_url ? '![](https://www.yoozecase.com/'%20+%20escapeHtml(w.image_url)%20+%20') ' : '') + '' + (i + 1) + '' + '' + escapeHtml(w.title) + '' + '' + getIcon(this.cfg.voteIcon) + ' ' + (w.votes | 0) + '' + ''; } html += ''; } } if (html === '') { this.elOutcome.hidden = true; return; } this.elOutcome.innerHTML = html; this.elOutcome.hidden = false; }; /** * Roadmap view (v3.2.0): renders the items as status columns, in the * canonical status order from cfg.statuses. Each column is an 12. inside \* the existing .yc-fb-list , holding its own inner of items - \* this keeps the delegated click/change handlers on elList working \* unchanged. Unknown statuses fall back into the "open" column so no item \* can silently disappear. Empty columns are skipped when \* cfg.roadmapHideEmpty is set. \*/ Board.prototype.renderRoadmap = function (items) { var stats = (this.cfg.statuses && this.cfg.statuses.length) ? this.cfg.statuses : \['open', 'planned', 'in\_progress', 'shipped', 'declined'\]; var labels = this.cfg.statusLabels || {}; var groups = {}; var i, st; for (i = 0; i ' + '##### ' + '' + escapeHtml(labels\[sv\] || sv) + '' + arr.length + '' + ' ' + '' + itemsHtml + ' ' + ' '; } return html; }; Board.prototype.renderItem = function (f, index) { var disabled = this.cfg.isClosed ? 'disabled' : ''; var voted = f.voted ? ' yc-voted' : ''; var descHtml = f.description ? '' + escapeHtml(f.description).replace(/\\n/g, ' ') + ' ' : ''; var thumbHtml = f.image_url ? '![](https://www.yoozecase.com/'%20+%20escapeHtml(f.image_url)%20+%20') ' : ''; // Status workflow (v3.0.0): badge for any non-default status. The // roadmap view (v3.2.0) skips the badge - the column already // communicates the status, a badge would be redundant noise. var st = (f.status || 'open'); var labels = this.cfg.statusLabels || {}; var statusBadge = (!this.isRoadmap && st && st !== 'open' && labels[st]) ? '' + escapeHtml(labels\[st\]) + '' : ''; // Design themes (v3.1.0): arena / neon / pixel render extra per-item // furniture - rank number, avatar (image or initials), a "leader" pill // on rank 1, and a "votes" label. Classic/colour themes are untouched. var t = this.cfg.theme || 'light'; var themed = (t === 'arena' || t === 'neon' || t === 'pixel'); var rank = (typeof index === 'number') ? (index + 1) : 0; var rankHtml = '', leaderHtml = '', avatarHtml = '', votesLabel = ''; if (themed) { rankHtml = '' + pad2(rank) + ''; if (rank === 1) { leaderHtml = '' + escapeHtml(this.cfg.leaderLabel || 'Leader') + ''; } if (f.image_url) { avatarHtml = '![](https://www.yoozecase.com/'%20+%20escapeHtml(f.image_url)%20+%20') '; } else { avatarHtml = '' + escapeHtml(initialsOf(f.title)) + ' '; } votesLabel = '' + escapeHtml(this.cfg.votesLabel || 'votes') + ''; } // Moderation overlay: subtle corner buttons, only when canModerate. // Buttons appear on hover/focus (styled in CSS). Even in customizer // preview we render them when canModerate is true so the moderator // can see what visitors with moderation rights will see. var modHtml = ''; if (this.cfg.canModerate) { var parts = []; var hideTitle = escapeHtml(this.t('hideTitle', 'Hide this feature')); var deleteTitle = escapeHtml(this.t('deleteTitle', 'Delete this feature')); if (this.cfg.allowSoftHide) { parts.push( '' ); } if (this.cfg.allowHardDelete) { parts.push( '' ); } if (parts.length || (this.cfg.statuses && this.cfg.statuses.length)) { var sParts = parts.slice(); if (this.cfg.statuses && this.cfg.statuses.length) { var opts = ''; for (var si = 0; si ' + escapeHtml(sl) + ''; } var setStatus = escapeHtml(this.t('setStatus', 'Set status')); sParts.push( '' ); } modHtml = '' + sParts.join('') + ' '; } } var mediaHtml = themed ? avatarHtml : thumbHtml; return ( '32. ' + leaderHtml + rankHtml + '' + mediaHtml + '' + '##### ' + escapeHtml(f.title) + ' ' + statusBadge + descHtml + ' ' + modHtml + ' ' ); }; /** * Detects whether a JSON response looks like a CSRF/token rejection. * Two cases: * 1. com_ajax-level rejection (Joomla's auto-token-check on POST): top * level message contains the JINVALID_TOKEN_NOTICE text and HTTP * status is typically 403. * 2. Plugin-level rejection from requireToken(): payload.error === "Invalid token". */ Board.prototype.isTokenError = function (status, raw, payload) { if (status === 403) return true; var hay = ''; try { hay = JSON.stringify(raw || {}) + '|' + JSON.stringify(payload || {}); } catch (e) {} return /invalid (security )?token/i.test(hay); }; /** * Fetch a fresh CSRF token from the server. Updates this.cfg.csrfToken so * the next call (and any future calls in this Board's lifetime) use the * correct one. Cache-bust with a timestamp so no upstream CDN caches the * response. */ Board.prototype.fetchFreshToken = function () { var self = this; var url = this.cfg.ajaxUrl + '&task=token&_=' + Date.now(); return fetch(url, { method: 'GET', credentials: 'same-origin', headers: { 'Accept': 'application/json', 'Cache-Control': 'no-cache' } }) .then(function (r) { return r.json(); }) .then(function (data) { var p = self.unwrapAjax(data); if (p && p.ok === true && typeof p.token === 'string' && p.token.length >= 16) { self.cfg.csrfToken = p.token; return p.token; } throw new Error('No fresh token in response'); }); }; /** * Generic POST-with-token helper. Builds FormData from a plain object, * adds the current token, posts. On 403 / token-error response, fetches a * fresh token and retries exactly once. * * @param {string} task The task name (appended to URL and body) * @param {object} fields Key-value form fields (no token) * @return {Promise} Resolves to the unwrapped payload on success. \* Rejects with Error containing .reason on failure. \*/ Board.prototype.postWithToken = function (task, fields) { var self = this; function attempt(token) { var fd = new FormData(); fd.append('task', task); for (var k in fields) { if (Object.prototype.hasOwnProperty.call(fields, k)) { fd.append(k, fields\[k\]); } } fd.append(token, '1'); return fetch(self.cfg.ajaxUrl + '&task=' + encodeURIComponent(task), { method: 'POST', credentials: 'same-origin', body: fd, headers: { 'Accept': 'application/json' } }).then(function (r) { return r.json().then(function (data) { return { status: r.status, raw: data, payload: self.unwrapAjax(data) }; }); }); } return attempt(this.cfg.csrfToken).then(function (res) { // Success path if (res.payload && res.payload.ok === true) { return res.payload; } // Token rejection? Fetch fresh and retry once. if (self.isTokenError(res.status, res.raw, res.payload)) { return self.fetchFreshToken().then(function (fresh) { return attempt(fresh).then(function (res2) { if (res2.payload && res2.payload.ok === true) { return res2.payload; } var err = new Error( (res2.payload && res2.payload.error) || (res2.raw && res2.raw.message) || self.t('requestFailed', 'Request failed.') ); err.payload = res2.payload || null; throw err; }); }); } // Some other error - surface it var err = new Error( (res.payload && res.payload.error) || (res.raw && res.raw.message) || self.t('requestFailed', 'Request failed.') ); err.payload = res.payload || null; throw err; }); }; Board.prototype.handleSubmit = function () { var self = this; if (isInBuilder()) { this.showStatus(this.t('previewSubmit', 'Preview mode - submissions are disabled in the YOOtheme builder. Try this on the published page.'), 'info'); return; } if (this.cfg.isClosed) { this.showStatus(this.cfg.closedMessage || this.t('votingClosed', 'Voting is closed.'), 'info'); return; } var title = (this.elTitle && this.elTitle.value || '').trim(); var desc = (this.elDesc && this.elDesc.value || '').trim(); // Client-side validation: minimum title length. Server re-validates. var minLen = (this.cfg.minTitleLength | 0) || 2; if (title.length for hide/delete, remember parent + sibling for rollback. var li = btn.closest('li'); var parentEl = li ? li.parentNode : null; var nextEl = li ? li.nextSibling : null; if (li && (action === 'hide' || action === 'delete')) { li.remove(); } btn.disabled = true; var task = action === 'hide' ? 'moderate\_hide' : action === 'delete' ? 'moderate\_delete' : action === 'restore' ? 'moderate\_restore' : ''; if (!task) { btn.disabled = false; return; } this.postWithToken(task, { feature\_id: featureId }) .then(function (payload) { // Success - keep the UI as-is (already removed) and refresh // so vote counts, top box, and hidden-features panel reflect // the new state. self.refresh(); if (self.hiddenOpen) { self.hiddenLoaded = false; // force a refetch self.fetchHiddenFeatures(); } var msg = action === 'delete' ? self.t('deleted', 'Feature deleted.') : action === 'hide' ? self.t('hidden', 'Feature hidden.') : action === 'restore' ? self.t('restored', 'Feature restored.') : self.t('done', 'Done.'); self.showStatus(msg, 'success'); setTimeout(function () { self.hideStatus(); }, 3000); }) .catch(function (err) { // Rollback: re-insert the row if we removed it. if (li && parentEl) { if (nextEl) { parentEl.insertBefore(li, nextEl); } else { parentEl.appendChild(li); } } btn.disabled = false; self.showStatus(err && err.message ? err.message : self.t('modFailed', 'Moderation action failed.'), 'error'); }); }; Board.prototype.handleStatusChange = function (featureId, status, sel) { var self = this; if (!featureId || !status) return; sel.disabled = true; this.postWithToken('moderate\_status', { feature\_id: featureId, status: status }) .then(function () { self.refresh(); var label = (self.cfg.statusLabels && self.cfg.statusLabels\[status\]) ? self.cfg.statusLabels\[status\] : status; self.showStatus(self.tf('statusSet', 'Status: %s', label), 'success'); setTimeout(function () { self.hideStatus(); }, 3000); }) .catch(function (err) { sel.disabled = false; self.showStatus(err && err.message ? err.message : self.t('statusFailed', 'Could not set status.'), 'error'); }); }; /\*\* \* Toggle the hidden-features panel open/closed. First open triggers \* an AJAX fetch; subsequent toggles just hide/show the cached list. \*/ Board.prototype.toggleHiddenPanel = function () { if (!this.elHiddenList || !this.elHiddenLabel) return; var arrow = this.elHiddenToggle && this.elHiddenToggle.querySelector('.yc-fb-hidden-arrow'); if (this.hiddenOpen) { this.hiddenOpen = false; this.elHiddenList.hidden = true; this.elHiddenLabel.textContent = this.t('showHidden', 'Show hidden features'); if (arrow) arrow.classList.remove('yc-open'); return; } this.hiddenOpen = true; this.elHiddenList.hidden = false; this.elHiddenLabel.textContent = this.t('hideHidden', 'Hide hidden features'); if (arrow) arrow.classList.add('yc-open'); if (!this.hiddenLoaded) { this.fetchHiddenFeatures(); } }; /\*\* \* Fetch the hidden-features list via the moderator-only endpoint. \* Re-callable to refresh the list after a restore. \*/ Board.prototype.fetchHiddenFeatures = function () { var self = this; if (!this.elHiddenList) return; this.elHiddenList.innerHTML = '2. ' + escapeHtml(this.t('loading', 'Loading...')) + ' '; var url = this.cfg.ajaxUrl + '&task=moderate\_list\_hidden&board\_id=' + encodeURIComponent(this.cfg.boardId); fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'application/json' } }) .then(function (r) { return r.json(); }) .then(function (data) { var payload = self.unwrapAjax(data); if (!payload || payload.ok !== true) { self.elHiddenList.innerHTML = '4. ' + escapeHtml((payload && payload.error) ? payload.error : self.t('hiddenLoadFailed', 'Failed to load hidden features.')) + ' '; return; } self.hiddenLoaded = true; var features = payload.features || \[\]; if (features.length === 0) { self.elHiddenList.innerHTML = '6. ' + escapeHtml(self.t('noHidden', 'No hidden features.')) + ' '; return; } var html = ''; for (var i = 0; i ' + escapeHtml(f.description).replace(/\\n/g, ' ') + '' : ''; var restoreTitle = escapeHtml(self.t('restoreTitle', 'Restore this feature')); html += '9. ' + '' + '##### ' + escapeHtml(f.title) + ' ' + descHtml + '' + escapeHtml(self.tf('votesMeta', '%s votes', f.votes | 0)) + '' + ' ' + '' + ' '; } self.elHiddenList.innerHTML = html; }) .catch(function () { self.elHiddenList.innerHTML = '11. ' + escapeHtml(self.t('hiddenNetwork', 'Network error while loading hidden features.')) + ' '; }); }; function initAll(scope) { var roots = (scope || document).querySelectorAll('.yc-fb-root'); for (var i = 0; i --- ## Changelog --- [ v2.0.2 Breaking 08/09/2026 ](#) Added- The `@extend` key is now resolved on WordPress as well, so both platforms build an element Changed- The builder element picker is unaffected. The aliases are registered but not offered, the same Fixed- Layouts built with the previous name kept their old element types and rendered nothing after [ v2.0.1 Breaking 12/08/2026 ](#) Fixed- The element was called simply "Accordion" in the builder picker, which collides with YOOtheme [ v2.0.0 Breaking 12/08/2026 ](#) Changed- Het product heet voortaan \*\*Frequently Asked Accordion\*\*, met de slogan "Zero collapsible damage." - Plugin-slug van `plg\_system\_yc\_harmonica` naar `plg\_system\_yc\_frequently\_asked\_accordion`. - Element-keys naar `yc\_frequently\_asked\_accordion` en `yc\_frequently\_asked\_accordion\_item`. - Element-titel in de builder-picker is nu functioneel "Accordion"; de merknaam staat al in de - Namespace naar `YOOzeCase\\FrequentlyAskedAccordion`, veld-namespace naar - Taalconstanten naar `PLG\_SYSTEM\_YC\_FREQUENTLY\_ASKED\_ACCORDION\_\*` in alle zes basistalen - WordPress-slug en textdomain naar `yc-frequently-asked-accordion`; alle .po/.mo/.pot opnieuw - CSS-klasseprefix naar `yc-accordion-`, JS-global naar `ycAccordion`. Bewust kort: deze staan - Update-feed naar `updates.yoozecase.com/frequently-asked-accordion/`; gateway-product-sleutel - Historische changelog-regels dragen nu ook de nieuwe productnaam, zodat er een consistente naam [ v1.5.1 Breaking 30/07/2026 ](#) Fixed- Fatal error on the frontend for every page holding an accordion, introduced in [ v1.5.0 Breaking 30/07/2026 ](#) Changed- Schema.org output is now decided once per page instead of once per accordion. - FAQ and Q&A schema are now treated as one category. At most one of the two is - The standalone test suite runs for the first time. It aborted immediately on - On a page where both this plugin and another extension produced an FAQPage, Fixed- An FAQ or Q&A schema published by another extension (JSitemap, a structured - The schema is now anchored to the page instead of floating beside it. Each [ v1.4.0 Breaking 27/07/2026 ](#) Added- Optional author and upvote count for Q&A Page schema. The question takes them - The element itself can now be bound to a dynamic content source, alongside the - Schema Text is now bindable to a dynamic source, so items that use a sublayout Changed- Speakable selectors are now scoped to the accordion that emits them - Last Modified Date keeps its time and timezone when the source supplies one, Fixed- How-to schema now carries the page url, like the FAQ, Q&A and Course types [ v1.3.3 Breaking 26/06/2026 ](#) Changed- The element picker icon now matches YOOtheme's own icon sizes: the library [ v1.3.2 Breaking 26/06/2026 ](#) Changed- Update server and changelog feed moved to the public product slug Fixed- Remember now also restores a fully collapsed accordion. Closing every panel [ v1.3.1 Breaking 26/06/2026 ](#) Fixed- Scroll to Opened Item now works on themes whose body uses overflow:clip. [ v1.3.0 Breaking 19/06/2026 ](#) Added- Item call-to-action and the colour pickers now have a companion: an empty - Optional "Last Modified Date" on the element. When filled (or bound to a ## Schema ```json { "@context": "https://schema.org", "@type": "Organization", "@id": "https://www.yoozecase.com/#organization", "name": "YOOzeCase", "alternateName": "A YOOzeCase Company", "description": "Premium plugins, extensions and YOOtheme Pro elements for WordPress and Joomla. A YOOzeCase Company: polished tools built for usability and performance.", "email": "info@yoozecase.com", "url": "https://www.yoozecase.com", "foundingDate": "2026-01-01", "logo": "https://www.yoozecase.com/images/yoozecase/Yoozecase logo.png", "image": "https://www.yoozecase.com/images/yoozecase/Yoozecase logo.png", "address": { "@type": "PostalAddress", "addressCountry": "NL", "addressLocality": "Rotterdam" }, "sameAs": [ "https://www.facebook.com/yoozecase", "https://x.com/yoozecase", "https://www.instagram.com/yoozecase", "https://www.youtube.com/@yoozecase", "https://bsky.app/profile/yoozecase.bsky.social", "https://www.threads.com/@yoozecase", "https://mastodon.social/@yoozecase", "https://www.reddit.com/user/yoozecase" ] } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.yoozecase.com" }, { "@type": "ListItem", "position": 2, "name": "Extensions", "item": "https://www.yoozecase.com/extensions" }, { "@type": "ListItem", "position": 3, "name": "Frequently Asked Accordion", "item": "https://www.yoozecase.com/" } ] } ```