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.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.0.

dotnet add package Osirion.Blazor.Core

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

<OsirionAccordion AllowMultiple="false">
    <OsirionAccordionItem Title="Requirements" Open="true">
        <p>A Blazor app on a .NET version the package supports.</p>
    </OsirionAccordionItem>
    <OsirionAccordionItem Title="Installation">
        <pre><code>dotnet add package Osirion.Blazor.Core</code></pre>
    </OsirionAccordionItem>
</OsirionAccordion>

@* IncludeStructuredData is off because this page is not an FAQ page and already has structured data of its own *@
<OsirionFaq Items="faq" IncludeStructuredData="false" />

@code {
    private readonly FaqItem[] faq =
    [
        new("Does the accordion need JavaScript?",
            "No. It is built on the native details element, so it opens and closes in the browser."),
        new("Can I keep only one answer open?",
            "Yes. Set AllowMultiple to false and the browser closes the others when one opens."),
    ];
}

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

Unmatched attributes go on the container <div>. Class is added to the container. Style is accepted but the component does not write it.

OsirionAccordionItem

Unmatched attributes and Class go on the <details> element. Style is accepted but the component does not write it.

OsirionFaq

OsirionFaq passes Class (next to osirion-faq) and unmatched attributes to its accordion. Style is accepted but the component does not write it.

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