Accordion

Renders template-parts/organisms/accordion — a list of native <details>/<summary> FAQ-style sections.

A section with an empty heading or content is skipped silently rather than rendering a broken row.

3 sections

What is your return policy?

You can return any item within 30 days of purchase for a full refund.

Do you ship internationally?

Yes, we ship to most countries. Shipping costs and times vary by location.

How do I track my order?

Once your order ships, you'll receive a tracking link via email.

Single section, custom class

Single FAQ heading

Single FAQ content goes here, with bold text to test wp_kses_post output.

Filter row variant ('filter_row' => true)

Collapsible accordion on mobile, forced-open inert row above breakpoint-m — same <details>/<summary> markup throughout, only the CSS shape changes (scss/components/_accordion.scss's .accordion--filter-row, plus js/responsive-accordion.js for pulling the trigger out of the Tab order above that breakpoint — a real <summary> stays natively Tab-focusable regardless of CSS alone). Resize this page above breakpoint-m to see every section's content force open and its trigger go inert — this demo deliberately stops there: the expanded-state layout (a row, a grid, whatever a caller wants) isn't part of the shared modifier, so it isn't demoed with extra CSS here either. See blocks/insights/style.scss for a real caller adding flex-direction: row on top of this same variant.

By Keyword
By Type
By Year

Playground

Change a value below to update the preview live.

What is your return policy?
You can return any item within 30 days of purchase for a full refund.
Do you ship internationally?
Yes, we ship to most countries. Shipping costs and times vary by location.
How do I track my order?
Once your order ships, you'll receive a tracking link via email.

Usage

get_template_part( 'template-parts/organisms/accordion', null, [
    'id'         => 'faq-accordion', // optional, auto-generated via wp_unique_id() if omitted
    'classes'    => '', // optional
    'filter_row' => false, // optional — collapsible accordion on mobile, forced-open inert
                            // row above breakpoint-m instead of a real FAQ accordion at every
                            // breakpoint; see the "Filter row variant" demo below
    'sections'   => [
        [
            'heading' => 'What is your return policy?',
            'content' => '<p>You can return any item within 30 days of purchase for a full refund.</p>',
        ],
        [
            'heading' => 'Do you ship internationally?',
            'content' => '<p>Yes, we ship to most countries. Shipping costs and times vary by location.</p>',
        ],
    ],
] );