aspnetcore-400754-devextreme-based-controls-controls-accordion.md
Accordion is a UI control that contains multiple panels displayed one under another.
Run Demo: Accordion Read Tutorial
The Accordion UI Control is based on the DevExtreme Accordion component.
To add this control to your project, follow the instructions in the following help topics:
@(Html.DevExtreme().Accordion()
.DataSource(new[] {
new {
ID = 1,
CompanyName = "Super Mart of the West",
Address = "702 SW 8th Street"
},
new {
ID = 2,
CompanyName = "Electronics Depot",
Address = "2455 Paces Ferry Road NW"
},
new {
ID = 3,
CompanyName = "K&S Music",
Address = "1000 Nicllet Mall"
}
})
.ItemTitleTemplate(@<text><b><%- CompanyName %></b></text>)
.ItemTemplate(@<text><i><%- Address %></i></text>)
)
InitializationCall the Accordion() method to create an Accordion control. This action initializes an AccordionBuilder instance. Use the instance methods to specify Accordion options and event handlers.OptionsFor a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.EventsFor available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.
OptionsIf you need to specify the DataGrid options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Accordion options.MethodsFor a list of available methods, see DevExtreme Accordion methods. For details on how to call methods, refer to the following help topic: Call Methods.
For more information on Accordion accessibility compliance, refer to the following help topic: Accessibility.