New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Expanding Single Panel at a Time When Using Multiple Expansion Panels

Environment

ProductTelerik UI for ASP.NET Core Expansion Panel
Progress Telerik UI for ASP.NET Core versionCreated with the 2024.2.514 version

Description

How can I allow the user to expand a single panel at a time when using multiple Expansion Panel components? Also, the user must be able to close all panels.

Solution

  1. Handle the click event of each Expansion Panel on the page, select the clicked panel, and call the toggle() method of the Expansion Panel to toggle the rest of the panels.

    Razor
        @(Html.Kendo().ExpansionPanel()
                .Name("brazil")
                .Title("Brazil")
                .SubTitle("South America")
                .Expanded(true)
                .Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast.")
        )
        @(Html.Kendo().ExpansionPanel()
                .Name("chile")
                .Title("Chile")
                .SubTitle("South America")
                .Content("There are various theories about the origin of the word Chile.")
        )
        @(Html.Kendo().ExpansionPanel()
                .Name("colombia")
                .Title("Colombia")
                .SubTitle("South America")
                .Content("The name 'Colombia' is derived from the last name of the Italian navigator Christopher Columbus.")
        )

For a runnable example based on the code above, refer to the following REPL samples:

More ASP.NET Core Expansion Panel Resources

See Also