The accordion control is a vertically collapsible content panel that displays one or more panels at a time within the available space.
An accordion can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming a array collection of items.
An accordion can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.
A single panel or multiple panels can be expanded/collapsed at a time by clicking anywhere on the header.
All the panels can be collapsed. With customization, a specific panel can always be open while the rest of panels are in a collapsed/expanded state.
Allows you to add nested levels of panel within the parent accordion.
Prefix icons/images can be added to the panel header, and the default expand/collapse icon used in header can be customized.
Accordion adapts responsively in devices based on the available space.
Accordion allows you to load external content to the panel using AJAX library to help load large amounts of content efficiently.
Supports different types of built-in animation for expanding/collapsing the panel. Animation behavior can also be customized.
During browser navigation, the expand and collapsed state of the accordion persists.
Developers can control the appearance and behavior of the accordion using a rich set of APIs.