Accordion and FAQ

OsirionAccordion and OsirionAccordionItem render collapsible sections on the native <details> element, so they open and close without script and work with the keyboard as they are. OsirionFaq uses them to render questions and answers, and also writes FAQPage structured data so search engines can read the answers. Google stopped showing FAQ rich results in May 2026, so the data no longer changes how the page looks in Google results.

Available from 4.1.

Usage

Accordion

@using Osirion.Blazor.Components

<OsirionAccordion>
    <OsirionAccordionItem Title="Requirements" Open="true">
        <p>.NET 9 or .NET 10.</p>
    </OsirionAccordionItem>
    <OsirionAccordionItem Title="Installation">
        <pre><code>dotnet add package Osirion.Blazor</code></pre>
    </OsirionAccordionItem>
</OsirionAccordion>

Set AllowMultiple="false" to keep at most one item open: opening one closes the others. An OsirionAccordionItem also works on its own, outside an accordion, as a single collapsible section.

FAQ

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

<OsirionFaq Items="faq" AllowMultiple="false" />

@code {
    private readonly FaqItem[] faq =
    [
        new("Does Osirion.Blazor need JavaScript?",
            "No. Every component renders with static server-side rendering; script only adds enhancements."),
        new("Where does the content come from?",
            "Markdown files in a GitHub repository or in a local folder."),
    ];
}

FaqItem is a record in Osirion.Blazor.Core.Models with two values, Question and Answer.

Parameters

OsirionAccordion

OsirionAccordionItem

OsirionFaq

On all three components, unmatched attributes go on the root element (OsirionFaq passes them to its accordion).

Behavior

• Everything is native HTML: <details> and <summary> open and close in the browser with no script, in static SSR and in interactive render modes.
• One-at-a-time accordions rely on the name attribute of <details>. Browsers that do not support it let several items stay open; nothing else breaks.
• Answers in OsirionFaq are plain text, encoded like any Razor text, so HTML in an answer shows as text. Line breaks you write in an answer (\n) are kept on screen.
• The structured data is a <script type="application/ld+json"> element with an FAQPage whose mainEntity lists each question with its accepted answer. It is built with System.Text.Json, whose default encoder escapes <, > and &, so a question or answer cannot close the script element. Text that cannot be written as JSON (half of a surrogate pair) leaves the structured data out, and the questions still render.
• Turn IncludeStructuredData off when the page already describes the same questions in its own structured data, and use one FAQPage per page.

Styling

The styles use the theme tokens --osirion-border-color (the lines between items), --osirion-text-primary, --osirion-text-secondary (answers), --osirion-action-primary (summary hover color) and --osirion-focus-ring-width with --osirion-focus-ring-color for the keyboard focus ring. Each has a fallback value, and a CSS framework adapter that sets them restyles the accordion with the site. The chevron's rotation is not animated under prefers-reduced-motion: reduce.

Related

• Tabs
• Callouts
• Content components