New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Expanding Single Panel at a Time When Using Multiple Expansion Panels
Environment
Product | Telerik UI for ASP.NET Core Expansion Panel |
Progress Telerik UI for ASP.NET Core version | Created 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
-
Handle the
click
event of each Expansion Panel on the page, select the clicked panel, and call thetoggle()
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: