Blazor Accordion

The accordion component allows the user to show and hide sections of related content on a page.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple accordion

Accordion Item #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Accordion Item #2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<BlazorAccordion>
    <BlazorAccordionTitle TargetToken="blazor-accordion-1">Accordion Item #1</BlazorAccordionTitle>
    <BlazorAccordionBody Token="blazor-accordion-1">
        ...
    </BlazorAccordionBody>
    <BlazorAccordionTitle TargetToken="blazor-accordion-2">Accordion Item #2</BlazorAccordionTitle>
    <BlazorAccordionBody InitialVisibility="true" Token="blazor-accordion-2">
        ...
    </BlazorAccordionBody>
</BlazorAccordion>

Toggling accordion using button

Blazor Accordion offers flexibility in toggling its sections, allowing developers to use buttons as well. To achieve this, developers can specify the TargetToken property for the BlazorCollapseToggleButton component. Here's an example:

Toggle Accordion Item #1 Accordion Item #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<BlazorCollapseToggleButton Variants="new[] {BaseVariants.Warning}" TargetToken="target-blazor-accordion-1">Toggle Accordion Item #1</BlazorCollapseToggleButton>
<BlazorAccordion>
    <BlazorAccordionTitle TargetToken="target-blazor-accordion-1">Accordion Item #1</BlazorAccordionTitle>
    <BlazorAccordionBody Token="target-blazor-accordion-1">
        ...
    </BlazorAccordionBody>
</BlazorAccordion>

In this example, the BlazorCollapseToggleButton component is used with the TargetToken property set to "target-blazor-accordion-1". This associates the toggle button with the corresponding accordion section.

Within the BlazorAccordion component, the BlazorAccordionTitle component uses the same TargetToken value to link to the accordion section. The BlazorAccordionBody component also utilizes the Token property to reference the same target token.

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorAccordion blazor-accordion
BlazorAccordionTitle blazor-accordion-title
BlazorAccordionBody blazor-accordion-body

Parameters

BlazorAccordion

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorAccordionBody

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Token string Establishes a unique identifier for components within Blazor Library. It enables association and coordination between related elements.
InitialVisibility bool Controls the initial visibility state of an accordion body section in the BlazorAccordionBody component. Set to true for the body to be initially visible.
ShowClass string Specifies the CSS class to be applied when BlazorAccordionBody component is visible.
HideClass string Specifies the CSS class to be applied when BlazorAccordionBody component is collapsed.

BlazorAccordionTitle

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
TargetToken string Identifies the target component for interaction. It establishes connections and enables actions on specific targets.
AccordionBodyShowingClass string Specifies the CSS class to be applied when BlazorAccordionBody component is visible.
AccordionBodyHidingClass string Specifies the CSS class to be applied when BlazorAccordionBody component is collapsed.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙