Search results

Set the nested Accordion in ASP.NET MVC Accordion control

20 Oct 2021 / 1 minute 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 id of nested element.

razor
nested.cs
Copied to clipboard
@using Syncfusion.EJ2.Navigations;

<div style="display: none">
    @Html.EJS().Accordion("childNested1").Items(new List<AccordionAccordionItem>
    {
        new AccordionAccordionItem { Header = "Video-1" },
        new AccordionAccordionItem { Header = "Video-2" }
    }).Render()
</div>
<div style="display: none">
    @Html.EJS().Accordion("childNested2").Items(new List<AccordionAccordionItem>
        {
        new AccordionAccordionItem { Header = "Music-1" },
        new AccordionAccordionItem { Header = "Music-2" },
        new AccordionAccordionItem { Header = "New Playlist", Expanded = true, Content= "#childNested4" }
        }).Render()
</div>
<div style="display: none">
    @Html.EJS().Accordion("childNested3").Items(new List<AccordionAccordionItem>
    {
        new AccordionAccordionItem { Header = "Image-1" },
        new AccordionAccordionItem { Header = "Image-2" }
    }).Render()
</div>
<div style="display: none">
    @Html.EJS().Accordion("childNested4").Items(new List<AccordionAccordionItem>
    {
        new AccordionAccordionItem { Header = "New Track-1" },
        new AccordionAccordionItem { Header = "New Track-2" }
    }).Render()
</div>
<div>
    @Html.EJS().Accordion("ParentNested").Width("50%").ExpandMode(ExpandMode.Multiple).Items(new List<AccordionAccordionItem>
    {
        new AccordionAccordionItem { Header = "Videos", Expanded = true, Content = "#childNested1" },
        new AccordionAccordionItem { Header = "Music", Expanded = true, Content = "#childNested2" },
        new AccordionAccordionItem { Header = "Images", Expanded = true, Content = "#childNested3" }
    }).Render()
</div>
Copied to clipboard
public ActionResult Index()
{
    return View();
}

Output be like the below.

Alt text