Default Accordion

The Accordion control allows you to provide navigation capabilities to your web application. The control displays navigation items arranged in collapsible groups. Groups within the Accordion can be declared using the Groups method. Each group has a collection of items that can be declared using the group's Items method.

@(Html.DevExpress()
    .BootstrapAccordion("accordionDefault")
    .Groups(groups => {
        groups.Add().Text("Tables")
        .Items(items => {
            items.Add()
                .Text("Users")
                .IconCssClass("fa fa-user");
            items.Add()
                .Text("Tasks")
                .IconCssClass("fa fa-tasks");
            items.Add()
                .Text("Scheduler")
                .IconCssClass("fa fa-calendar");
        });
        groups.Add().Text("Analysis")
         .Items(items => {
             items.Add()
                 .Text("Dashboard")
                 .IconCssClass("fa fa-dashboard");
             items.Add()
                 .Text("KPI")
                 .IconCssClass("fa fa-percent");
         });
    })
)

Items Selection

The Accordion control supports selection of items with a mouse click or with client-side API. Pass true the Accordion control’s AllowSelectItem method to allow item selection.

Use the following API to programmatically get or set the selection status:

Moreover, the Bootstrap Accordion control can automatically select an item for a current page. You can control this behavior using the SyncSelectionMode method.

To respond to selection changes, subscribe to the ItemClick client event using the ClientSideEvents method

<script type="text/javascript">
    function onItemClick_ItemsSelection(args) {
        dxbsDemo.showToast("The '" + this.getSelectedItem().getText() + "' item has been selected.");
    }
</script>
@(Html.DevExpress()
    .BootstrapAccordion("accordionSelection")
    .AllowSelectItem(true)
    .ClientSideEvents(events => events
        .ItemClick("onItemClick_ItemsSelection"))
    .Groups(groups => {
groups
            .Add()
            .Text(".NET Controls")
            .Items(items => {
                items.Add().Text("WinForms");
                items.Add()
                    .Text("ASP.NET")
                    .Selected(true);
                items.Add().Text("ASP.NET MVC");
                items.Add().Text("WPF");
            });
        groups
            .Add()
            .Text("Cross Platform")
            .Items(items => {
                items.Add().Text("Reporting");
                items.Add().Text("Document Server");
            });
    })
)

Auto Collapse

When the Auto Collapse feature is activated, only one Accordion group can be expanded at a time. To activate this functionality, call the Accordion control’s AutoCollapse method with true argument.

@(Html.DevExpress()
    .BootstrapAccordion("accordionAutoCollapse")
    .AutoCollapse(true)
    .Groups(groups => {
        groups
            .Add()
            .Text(".NET Controls")
            .Items(items => {
                items.Add().Text("WinForms");
                items.Add().Text("ASP.NET");
                items.Add().Text("ASP.NET MVC");
                items.Add().Text("WPF");
            });
        groups
            .Add()
            .Text("Cross Platform")
            .Items(items => {
                items.Add().Text("Reporting");
                items.Add().Text("Document Server");
            });
    })
)

Badges

The Accordion control can display supplementary information for any item or group within a badge. A badge can display text, an icon or both. Use the following API to configure badges on the server side:

Accordion group methods:

Accordion item methods:

The methods listed below allow you to manipulate badges on the client:

Note that the HeaderBadge and Badge methods does not affect templated group headers and items.

@(Html.DevExpress()
    .BootstrapAccordion("badgesAccordion")
    .ClientSideEvents(events => events
        .ItemClick("onItemWithBadgeClick")
        .ExpandedChanged("onGroupWithHeaderBadgeExpanded"))
    .Groups(groups => {
        groups
            .Add()
            .Text(".NET Controls")
            .Items(items => {
                items.Add()
                    .Text("WinForms")
                    .Badge(badge => badge.Text("160+"));
                items
                    .Add()
                    .Text("ASP.NET")
                    .Badge(badge => badge.Text("100+"));
                items
                    .Add()
                    .Text("ASP.NET MVC")
                    .Badge(badge => badge.Text("65+"));
                items
                    .Add()
                    .Text("WPF")
                    .Badge(badge => badge.Text("110+"));
            });
        groups
            .Add()
            .Expanded(false)
            .HeaderBadge(badge => badge.Text("2"))
            .Text("Cross Platform")
            .Items(items => {
                items
                    .Add()
                    .Text("Reporting");
                items
                    .Add()
                    .Text("Document Server");
            });
    })
)
function onItemWithBadgeClick(args) {
    if (args.item.getBadgeText())
        args.item.setBadgeText("");
}
function onGroupWithHeaderBadgeExpanded(args) {
    var group = args.group;
    if (group.getExpanded() && group.getHeaderBadgeText())
        group.setHeaderBadgeText("");
}

Templates

The Accordion control supports templates allowing you to customize control appearance and layout. A template can be applied to all items or groups (using control level templates) or specific ones (using item/group level templates). Use the following methods to specify templates.

Accordion methods:

Accordion item methods:

Accordion group methods:

@(Html.DevExpress()
    .BootstrapAccordion("templatesAccordion")
    .GroupContentTemplate(t => @<text>
                <div class="card">
                    <div class="list-group list-group-flush">
                        @foreach(var groupItem in t.Group.Items) {
                            <a href="javascript:;" class="list-group-item list-group-item-action">
                                <h5 class="list-group-item-heading">@groupItem.Text</h5>
                                <p class="list-group-item-text">
                                    DevExpress @groupItem.Text @(t.Group.Name == "UIControls"
                                        ? (groupItem.Name == "MVC" ? "Extensions" : "Controls and Libraries")
                                        : "") for the .NET Framework.
                                </p>
                            </a>
                        }
                    </div>
                </div>
        </text>)
    .Groups(groups => {
        groups.Add().Name("UIControls").Text(".NET Controls")
        .Items(items => {
            items.Add().Name("WIN").Text("WinForms");
            items.Add().Name("ASP").Text("ASP.NET");
            items.Add().Name("MVC").Text("ASP.NET MVC");
            items.Add().Name("WPF").Text("WPF");
        });
        groups.Add().Name("CrossPlatform").Text("Cross Platform")
        .Expanded(false)
        .Items(items => {
            items.Add().Name("Reporting").Text("Reporting");
            items.Add().Name("DocumentServer").Text("Document Server");
        });
    })
)

Client-Side Events

This demo illustrates the capabilities of the Accordion control's client events and allows you to specify which client-side events you want to track. Interact with the Accordion interface to see the information about all tracked events raised in response to your actions in the event log.

The item.name and group.name properties of the event handler's parameter allow you to identify the item for which an event has been raised.

Trace Events:
<script type="text/javascript">
    function onExpandedChanged(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ExpandedChanged');
    }
    function onExpandedChanging(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ExpandedChanging');
    }
    function onHeaderClick(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'HeaderClick');
    }
    function onInit(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'Init');
    }
    function onItemClick(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ItemClick');
    }
</script>
@(Html.DevExpress()
    .BootstrapAccordion("clientSideEventsAccordion")
    .AllowSelectItem(true)
    .ClientSideEvents(events => events
        .ItemClick("onItemClick")
        .ExpandedChanged("onExpandedChanged")
        .ExpandedChanging("onExpandedChanging")
        .HeaderClick("onHeaderClick")
        .Init("onInit")
    )
    .Groups(groups => {
        groups
            .Add()
            .Text(".NET Controls")
            .Items(items => {
                items.Add().Text("WinForms");
                items.Add()
                    .Text("ASP.NET")
                    .Selected(true);
                items.Add().Text("ASP.NET MVC");
                items.Add().Text("WPF");
            });
        groups
            .Add()
            .Text("Cross Platform")
            .Items(items => {
                items.Add().Text("Reporting");
                items.Add().Text("Document Server");
            });
    })
)

Client-Side Functionality

The Accordion control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if any client-side event available through the ClientSideEvents method is handled.

This demo allows you to interactively explore capabilities of the Accordion control's client-side API.

BootstrapAccordion methods:

BootstrapAccordionItem methods:

BootstrapAccordionGroup methods:

@(Html.DevExpress()
    .BootstrapAccordion("accordionControl")
    .EnableClientSideAPI(true)
    .AllowSelectItem(true)
    .Groups(groups =>
    {
        groups.Add().Text("Group 1")
        .Items(items => {
            items.Add().Text("Item 1");
            items.Add().Text("Item 2");
            items.Add()
                .Text("Item 3")
                .IconCssClass("fa fa-fa");
        });
        groups.Add().Text("Group 2")
        .Expanded(false)
        .Items(items => {
            items.Add().Text("Item 1");
            items.Add().Text("Item 2");
        });
        groups.Add().Text("Group 3")
        .Expanded(false);
    })
)
Screen Size
Color Themes
Demo QR Code