Components

Accordion

A stack of items, each a heading that opens the content under it. Every item is a <details>, so it opens with a click, Enter or Space in the browser, with no handler and nothing sent to the page.

Drawn and behaving as Flux UI's accordion does, measured against its live docs.

Accordion

Items of a heading and its content.

AccordionExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion[
            Ui.AccordionItem[
                Ui.AccordionHeading["What's your refund policy?"],
                Ui.AccordionContent[
                    "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
                ]
            ],
            Ui.AccordionItem[
                Ui.AccordionHeading["Do you offer any discounts for bulk purchases?"],
                Ui.AccordionContent[
                    "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
                ]
            ],
            Ui.AccordionItem[
                Ui.AccordionHeading["How do I track my order?"],
                Ui.AccordionContent[
                    "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
                ]
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Shorthand

Heading on the item says the heading; the children are the content.

AccordionShorthandExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionShorthandExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion[
            Ui.AccordionItem.Heading("What's your refund policy?")[
                "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
            ],
            Ui.AccordionItem.Heading("Do you offer any discounts for bulk purchases?")[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")[
                "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

With transition

Transition() opens and closes each item over a quarter of a second.

AccordionTransitionExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionTransitionExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion.Transition()[
            Ui.AccordionItem.Heading("What's your refund policy?")[
                "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
            ],
            Ui.AccordionItem.Heading("Do you offer any discounts for bulk purchases?")[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")[
                "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Findable content

Search the page for "signature": the browser opens the item holding it.

AccordionFindableExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionFindableExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion[
            Ui.AccordionItem.Heading("Where do you ship?")["We ship to addresses throughout the United States and Canada."],
            Ui.AccordionItem.Heading("Do I need to be home for delivery?")["Orders over $500 require a signature upon delivery."],
            Ui.AccordionItem.Heading("Can I change my order?")["Contact our support team before your order has shipped."]
        ];
}

Live result

Where do you ship?

We ship to addresses throughout the United States and Canada.

Do I need to be home for delivery?

Orders over $500 require a signature upon delivery.

Can I change my order?

Contact our support team before your order has shipped.

Disabled

A disabled item cannot be opened, and Tab passes over it.

AccordionDisabledExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionDisabledExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion[
            Ui.AccordionItem.Heading("What's your refund policy?")["It all depends how nice you are to me in your email."],
            Ui.AccordionItem.Heading("Do you offer PPP discounts?").Disabled()[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")["What do YOU think?"]
        ];
}

Live result

What's your refund policy?

It all depends how nice you are to me in your email.

Do you offer PPP discounts?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

What do YOU think?

Exclusive

Opening one item closes the others.

AccordionExclusiveExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionExclusiveExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion.Exclusive()[
            Ui.AccordionItem.Heading("What's your refund policy?")[
                "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
            ],
            Ui.AccordionItem.Heading("Do you offer any discounts for bulk purchases?")[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")[
                "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Expanded

Expanded() is open as the page loads.

AccordionExpandedExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionExpandedExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion[
            Ui.AccordionItem.Heading("What's your refund policy?")[
                "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
            ],
            Ui.AccordionItem.Heading("Do you offer any discounts for bulk purchases?").Expanded()[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")[
                "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Leading icon

Reverse puts the chevron before the heading.

AccordionLeadingIconExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AccordionLeadingIconExample : Component
{
    protected override Component? Render() =>
        Ui.Accordion.Reverse[
            Ui.AccordionItem.Heading("What's your refund policy?")[
                "If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance."
            ],
            Ui.AccordionItem.Heading("Do you offer any discounts for bulk purchases?")[
                "Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements."
            ],
            Ui.AccordionItem.Heading("How do I track my order?")[
                "Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website."
            ]
        ];
}

Live result

What's your refund policy?

If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.

Do you offer any discounts for bulk purchases?

Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.

How do I track my order?

Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website.

Behaviour

No handler, and no script

An item is a native <details> and its heading the <summary>, so a click, Enter or Space opens it in the browser, Tab moves from heading to heading, and Exclusive() is the platform's own <details name> group.

Closed content is still in the document, so find-in-page reaches it and the browser opens the item holding the match. A disabled heading leaves the tab order, takes no pointer and says aria-disabled.

Who owns which items are open

Expanded() is the state an item starts in. As in Flux, the accordion reports nothing back: the browser owns which items are open.

A single collapsible section is an accordion of one item; Ui.Collapse, Ui.AccordionSection and Ui.Marker are gone.

The transition

Transition() animates the height of the <details>' own content box (::details-content, with interpolate-size) over 250ms. A browser without those opens and closes at once, which is what an accordion without the step does everywhere.

Reference

`Ui.Accordion`

flux:accordion

A stack of items, each a heading that opens the content under it.

Step	Takes	What it does
`.Variant(…)`	`Ui.AccordionVariant` Default Reverse Each is a step of its own too, unless an HTML tag has its name.	Which side of the heading the chevron is on. After it when unset.
`.Transition()`	`bool`	Opens and closes items over a quarter of a second rather than at once.
`.Exclusive()`	`bool`	Opening one item closes the others: the platform's own <details name> group.

`Ui.AccordionItem`

flux:accordion.item

One item: a <details>, its heading the <summary>.

Step	Takes	What it does
`.Heading(…)`	`string`	The heading's words, in place of a Ui.AccordionHeading child; the children are then the content.
`.Expanded()`	`bool`	Open to begin with. The browser owns it from there.
`.Disabled()`	`bool`	Cannot be opened or closed, and leaves the tab order.

`Ui.AccordionHeading`

flux:accordion.heading

The line that opens and closes the item, with its chevron.

No steps of its own: what goes inside it is its content.

`Ui.AccordionContent`

flux:accordion.content

What the item opens to show.

No steps of its own: what goes inside it is its content.