Set the nested accordion in Vue Accordion component

23 Jul 202413 minutes to read

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 v-slot template. In the Vue component, the v-slot directive is used to define a slot template in the component’s template where users can insert custom content.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-accordion>
            <e-accordionitems>
                <e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
                <template v-slot:NestedVideo>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Video Track1' ></e-accordionitem>
                            <e-accordionitem header='Video Track2' ></e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
                <e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
                <template v-slot:NestedMusic>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Music  Track1' ></e-accordionitem>
                            <e-accordionitem header='Music  Track2' ></e-accordionitem>
                            <e-accordionitem header='Music  New' :content="'NestedMusicNew'"></e-accordionitem>
                            <template v-slot:NestedMusicNew>
                                <ejs-accordion>
                                    <e-accordionitems>
                                        <e-accordionitem header='New  Track1' ></e-accordionitem>
                                        <e-accordionitem header='New  Track2' ></e-accordionitem>
                                    </e-accordionitems>
                                </ejs-accordion>
                            </template>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
                <e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
                <template v-slot:NestedImages>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Image Track1' ></e-accordionitem>
                            <e-accordionitem header='Image Track2' ></e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
            </e-accordionitems>
        </ejs-accordion>
    </div>
</template>
<script setup>
import { AccordionComponent as EjsAccordion, AccordionItemDirective as EAccordionitem, AccordionItemsDirective as EAccordionitems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-accordion>
            <e-accordionitems>
                <e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
                <template v-slot:NestedVideo>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Video Track1' ></e-accordionitem>
                            <e-accordionitem header='Video Track2' ></e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
                <e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
                <template v-slot:NestedMusic>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Music  Track1' ></e-accordionitem>
                            <e-accordionitem header='Music  Track2' ></e-accordionitem>
                            <e-accordionitem header='Music  New' :content="'NestedMusicNew'"></e-accordionitem>
                            <template v-slot:NestedMusicNew>
                                <ejs-accordion>
                                    <e-accordionitems>
                                        <e-accordionitem header='New  Track1' ></e-accordionitem>
                                        <e-accordionitem header='New  Track2' ></e-accordionitem>
                                    </e-accordionitems>
                                </ejs-accordion>
                            </template>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
                <e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
                <template v-slot:NestedImages>
                    <ejs-accordion>
                        <e-accordionitems>
                            <e-accordionitem header='Image Track1' ></e-accordionitem>
                            <e-accordionitem header='Image Track2' ></e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </template>
            </e-accordionitems>
        </ejs-accordion>
    </div>
</template>
<script>

import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from "@syncfusion/ej2-vue-navigations";

export default {
    name: "App",
    components: {
        "ejs-accordion": AccordionComponent,
        "e-accordionitems": AccordionItemsDirective,
        "e-accordionitem": AccordionItemDirective
    },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>