Accordion Component

The P11Accordion is a collapsible content container built with Bootstrap 5 and optimized for 100% accessibility compliance.

Note: This component wraps Bootstrap's accordion while enforcing stricter accessibility rules.

Standard Accordion (initially closed)

This is the content of the first accordion item. It is closed by default.

You can place any HTML content here.

This is the content of the second accordion item.

List item 1
List item 2

Implementation


<div class="accordion" id="standardAccordion">
    <P11Accordion ParentId="standardAccordion">
        <Title>
            <span>First Item: Standard</span>
        </Title>
        <ChildContent>
            <p>This is the content of the first accordion item. It is closed by default.</p>
            <p>You can place any HTML content here.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="standardAccordion">
        <Title>
            <span class="text-success">Second Item: Also Standard</span>
        </Title>
        <ChildContent>
            <p>This is the content of the second accordion item.</p>
            <ul>
                <li>List item 1</li>
                <li>Listen item 2</li>
            </ul>
        </ChildContent>
    </P11Accordion>
</div>


// Example of how to use P11Accordion in C# code, e.g., in a dynamic component or code-behind.
// In most Blazor applications, you will use it directly in Razor markup as shown above.

// If you were to create it programmatically:
// var accordionItem = new P11Accordion
// {
//     ParentId = "myParentAccordion",
//     IsInitiallyOpen = true,
//     Title = @Layout.RenderFragment(builder => { builder.OpenElement(0, "span"); builder.AddContent(1, "Programmatic Title"); builder.CloseElement(); }),
//     ChildContent = @Layout.RenderFragment(builder => { builder.OpenElement(0, "p"); builder.AddContent(1, "This content was added programmatically."); builder.CloseElement(); }),
//     HeaderBackgroundClass = "bg-info",
//     HeaderTextVariant = LabelVariant.White, // Assuming LabelVariant is accessible
//     BodyBackgroundClass = "bg-light"
// };

// Note: Directly instantiating UI components like this is uncommon in Blazor.
// They are primarily designed for declarative use in .razor files.

Accordion with Initially Open Item

This item is initially closed.

This content is visible as soon as the page loads.

Note the IsInitiallyOpen="true" parameter.

Implementation


<div class="accordion" id="openAccordion">
    <P11Accordion ParentId="openAccordion">
        <Title>
            <span class="text-muted">Item 1 (Standard)</span>
        </Title>
        <ChildContent>
            <p>This item is initially closed.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="openAccordion" IsInitiallyOpen="true">
        <Title>
            <span class="text-danger">Item 2 (Initially Open!)</span>
        </Title>
        <ChildContent>
            <p>This content is visible as soon as the page loads.</p>
            <p>Note the <code>IsInitiallyOpen="true"</code> parameter.</p>
        </ChildContent>
    </P11Accordion>
</div>


// No specific C# code required for this example, as the component's state is controlled directly
// via its parameters in Razor markup.
// P11Accordion is primarily designed for declarative use in .razor files.

Accordion with Custom Background and Text Colors (Header & Body)

This accordion header has a dark background and white text.

The body has a secondary (gray) background and white text.

An example with a yellow header and light blue body.

Implementation


<div class="accordion" id="customColorsAccordion">
    <P11Accordion ParentId="customColorsAccordion"
                  HeaderBackgroundClass="bg-dark"
                  HeaderTextVariant="LabelVariant.White"
                  BodyBackgroundClass="bg-secondary text-white"
                  IsInitiallyOpen="true">
        <Title>
            <span class="fw-bold">Dark Header, Light Text, Gray Body</span>
        </Title>
        <ChildContent>
            <p>This accordion header has a dark background and white text.</p>
            <p>The body has a secondary (gray) background and white text.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="customColorsAccordion"
                  HeaderBackgroundClass="bg-warning"
                  HeaderTextVariant="LabelVariant.Dark"
                  BodyBackgroundClass="bg-info text-dark">
        <Title>
            <span class="fw-bold">Warning Header, Info Body</span>
        </Title>
        <ChildContent>
            <p>An example with a yellow header and light blue body.</p>
        </ChildContent>
    </P11Accordion>
</div>


// No specific C# code required for this example, as the component's styling
// is controlled directly via its parameters in Razor markup.
// LabelVariant is an enum typically defined in your project's Models or Enums folder.

Accordion without ParentId (Standalone Behavior)

These accordions operate independently of each other, as they do not share a common ParentId.

I am an independent accordion. I do not close any other when opened.

I am also an independent accordion.

Implementation


<!-- These accordions operate independently of each other, as they do not share a common ParentId. -->
<P11Accordion CssClass="mb-3 border border-primary p-2" IsInitiallyOpen="true">
    <Title>
        <span>Standalone Accordion 1</span>
    </Title>
    <ChildContent>
        <p>I am an independent accordion. I do not close any other when opened.</p>
    </ChildContent>
</P11Accordion>

<P11Accordion CssClass="mb-3 border border-secondary p-2">
    <Title>
        <span>Standalone Accordion 2</span>
    </Title>
    <ChildContent>
        <p>I am also an independent accordion.</p>
    </ChildContent>
</P11Accordion>


// No specific C# code required for this example, as the component's behavior
// (standalone vs. grouped) is determined by the presence or absence of the ParentId parameter
// directly in Razor markup.

Accordion with Additional Attributes

This accordion item has a custom data attribute and an inline style applied to its root element.

Implementation


<div class="accordion" id="additionalAttributesAccordion">
    <P11Accordion ParentId="additionalAttributesAccordion"
                  data-custom-attribute="my-value"
                  style="border: 2px dashed green;">
        <Title>
            <span>Accordion with Additional Attributes</span>
        </Title>
        <ChildContent>
            <p>This accordion item has a custom data attribute and an inline style applied to its root element.</p>
        </ChildContent>
    </P11Accordion>
</div>


// Additional (unmatched) attributes like 'data-custom-attribute' or 'style'
// are automatically captured by the P11Accordion component and applied to its
// root 'accordion-item' HTML element. This is handled by Blazor's
// 'CaptureUnmatchedValues' feature on the 'AdditionalAttributes' parameter.
// No specific C# code is needed to pass these attributes.

Component API

Parameter	Type	Default	Description
`CssClass`	`string?`	`null`	Additional CSS class names to apply to the root `accordion-item` element.
`IsInitiallyOpen`	`bool`	`false`	Sets whether this accordion item should be expanded initially when rendered.
`Title`	`RenderFragment?`	`null`	The content to display in the accordion header. This allows for rich content.
`ChildContent`	`RenderFragment?`	`null`	The main content to be displayed within the collapsible accordion body.
`HeaderBackgroundClass`	`string?`	`null`	A Bootstrap background utility class (e.g., 'bg-primary', 'bg-dark') for the accordion header.
`HeaderTextVariant`	`LabelVariant`	`LabelVariant.Black`	Explicitly sets the text color variant for the header. If not set, it's derived from `HeaderBackgroundClass`.
`BodyBackgroundClass`	`string?`	`null`	A Bootstrap background utility class (e.g., 'bg-light', 'bg-white') for the accordion body.
`ParentId`	`string?`	`null`	The ID of the parent accordion container. Enables 'one-open-at-a-time' behavior.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures un-matched attributes passed to the component, applied to the root `accordion-item`.