FAQ widget

The FAQ widget is an accessible accordion: every question is a button inside a heading tag, and every answer is a region connected to that button with aria-labelledby. Alongside the widget, FAQPage structured data is printed.

The “Questions” section

The only control here is a repeater called Items with three fields:

On first use the widget is filled with a few sample items so you can see the structure; replace all of their text with your own content.

The “Behaviour” section

Accordion mode: opening an item closes the previously open one. Better for long lists and mobile screens.

Toggle mode: every item opens and closes independently, so visitors can keep several answers open at once; better for comparing questions.

Icons are inline SVG elements coloured with currentColor, so they follow the colour controls in the “Icon” section. In the open state the plus icon rotates 45 degrees and the chevron and custom icons rotate 180 degrees; the rotation of a custom icon is adjustable with “Custom icon rotation when open (degrees)”.

The “SEO and structure” section

Shape of the structured data output

{
	"@context": "https://schema.org",
	"@type": "FAQPage",
	"mainEntity": [
		{
			"@type": "Question",
			"name": "How are the courses delivered?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "All courses are video-based and online…"
			}
		}
	]
}

The output is printed with JSON_UNESCAPED_UNICODE, so non-Latin text stays readable in the page source instead of becoming \uXXXX sequences.

HTML output structure

<div class="wgcr-faq" data-mode="accordion" data-speed="300">
	<div class="wgcr-faq-list">
		<div class="wgcr-faq-item open" data-icon="plus">
			<h3 class="wgcr-faq-qwrap">
				<button type="button" class="wgcr-faq-q" id="wgcr-faq-q-abc123-0"
					aria-expanded="true" aria-controls="wgcr-faq-a-abc123-0">
					<span class="wgcr-faq-qtext">Question title</span>
					<span class="wgcr-faq-ic"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
				</button>
			</h3>
			<div class="wgcr-faq-a" role="region" id="wgcr-faq-a-abc123-0"
				aria-labelledby="wgcr-faq-q-abc123-0">
				<div class="wgcr-faq-atext">Answer text…</div>
			</div>
		</div>
	</div>
</div>

Accessibility and keyboard

• Closed answers leave the tab order (through visibility: hidden), so keyboard users never get trapped inside hidden content.
• The focus ring is only painted for :focus-visible, so mouse clicks do not draw a blue outline.
• When the visitor enabled prefers-reduced-motion, animation is removed and items open instantly.
• The height of each open answer is measured dynamically and re-measured when the window is resized, so long answers are never clipped.
• Movement between questions wraps around: after the last question, ArrowDown returns to the first.

More detail on the accessibility and keyboard shortcuts pages.

Style sections

Overall layout

Card body

Title

Answer card

Icon

Custom styling example

To change the appearance outside the controls, this snippet in your theme's custom CSS is enough:

.wgcr-faq-item {
	border-radius: 16px;
	box-shadow: 0 2px 10px rgb(15 23 42 / 6%);
}
.wgcr-faq-item.open .wgcr-faq-qtext {
	color: #1d4ed8;
}
@media (prefers-reduced-motion: reduce) {
	.wgcr-faq-a { transition: none; }
}

Complete control reference

Every content control of the widget, in panel order. Style controls are listed in “Style sections” above.

Troubleshooting