Search results

Set the nested Accordion

Accordion supports to render nested level of Accordion by using Content property. You can give nested Accordion content inside the parent Accordion content property by using ContentTemplate of nested element.

@using Syncfusion.EJ2.Blazor.Navigations

<EjsAccordion>
    <AccordionItems>
        <AccordionItem Header="Video">
            <ContentTemplate>
                <EjsAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Video Track1"></AccordionItem>
                        <AccordionItem Header="Video Track2"></AccordionItem>
                    </AccordionItems>
                </EjsAccordion>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Music">
            <ContentTemplate>
                <EjsAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Music Track1"></AccordionItem>
                        <AccordionItem Header="Music Track2"></AccordionItem>
                        <AccordionItem Header="Music New">
                            <ContentTemplate>
                                <EjsAccordion>
                                    <AccordionItems>
                                        <AccordionItem Header="New Track1"></AccordionItem>
                                        <AccordionItem Header="New Track2"></AccordionItem>
                                    </AccordionItems>
                                </EjsAccordion>
                            </ContentTemplate>
                        </AccordionItem>
                    </AccordionItems>
                </EjsAccordion>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Images">
            <ContentTemplate>
                <EjsAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Track1"></AccordionItem>
                        <AccordionItem Header="Track2"></AccordionItem>
                    </AccordionItems>
                </EjsAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</EjsAccordion>

Output be like the below.

Alt text