Details

Collapsible disclosure widget with htmx lazy loading.

<rhx-details>

Examples

Basic

What is htmxRazor?

htmxRazor is an ASP.NET Core component library built with Razor Tag Helpers and first-class htmx integration.

<rhx-details rhx-summary="What is htmxRazor?">
    <p>htmxRazor is an ASP.NET Core component library built with
       Razor Tag Helpers and first-class htmx integration.</p>
</rhx-details>

Open by Default

System Requirements

.NET 9.0 or later
ASP.NET Core Razor Pages or MVC
Any modern browser

<rhx-details rhx-summary="System Requirements" rhx-open>
    <ul>
        <li>.NET 9.0 or later</li>
        <li>ASP.NET Core Razor Pages or MVC</li>
        <li>Any modern browser</li>
    </ul>
</rhx-details>

Multiple (FAQ)

How do I install htmxRazor?

Add the NuGet package to your project and register the tag helpers in _ViewImports.cshtml.

Does it work with htmx?

Yes! Every component supports hx-get, hx-post, hx-trigger, hx-target, and hx-swap attributes.

Is it accessible?

htmxRazor uses semantic HTML, ARIA attributes, and keyboard navigation throughout all components.

<rhx-details rhx-summary="How do I install htmxRazor?">
    <p>Add the NuGet package and register the tag helpers
       in _ViewImports.cshtml.</p>
</rhx-details>
<rhx-details rhx-summary="Does it work with htmx?">
    <p>Yes! Every component supports hx-get, hx-post,
       hx-trigger, hx-target, and hx-swap attributes.</p>
</rhx-details>
<rhx-details rhx-summary="Is it accessible?">
    <p>htmxRazor uses semantic HTML, ARIA attributes,
       and keyboard navigation throughout all components.</p>
</rhx-details>

Disabled

Locked Section

This content cannot be accessed.

<rhx-details rhx-summary="Locked Section" rhx-disabled>
    <p>This content cannot be accessed.</p>
</rhx-details>

htmx Lazy Load

Load Order History

<rhx-details rhx-summary="Load Order History"
             hx-get="/Docs/Components/Details?handler=DetailsContent"
             hx-trigger="toggle once"
             hx-target="find .rhx-details__content">
    <rhx-spinner rhx-size="small" />
</rhx-details>

Properties

Property	Type	Default	Description
`rhx-summary`	`string`	`-`	The text shown in the clickable summary/header
`rhx-open`	`bool`	`false`	Whether the details starts expanded
`rhx-disabled`	`bool`	`false`	Prevents toggling