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.@(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.") )
@addTagHelper *, Kendo.Mvc <kendo-expansionpanel name="brazil" title="Brazil" sub-title="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. </content> </kendo-expansionpanel> <kendo-expansionpanel name="chile" title="Chile" sub-title="South America"> <content> There are various theories about the origin of the word Chile. </content> </kendo-expansionpanel> <kendo-expansionpanel name="colombia" title="Colombia" sub-title="South America"> <content> The name 'Colombia' is derived from the last name of the Italian navigator Christopher Columbus. </content> </kendo-expansionpanel>
<script> $(document).ready(function() { $(".k-expander .k-expander-header").on("click", function() { // Handle the "click" event of each Expansion Panel. let currentPanel = $(this).parent(); // Select the clicked element. let expandedPanels = $(".k-expander").not(currentPanel); // Select the rest of the Expansion Panel elements on the page. $.each(expandedPanels, function(){ // Loop through them. if($(this).hasClass("k-expanded")) { // Check if there are expanded panels. let expandedPanel = $(this).find("[data-role='expansionpanel']").data("kendoExpansionPanel"); //Get a reference to each expanded Expansion Panel. expandedPanel.toggle(); // Toggle it. } }); }); }); </script>
For a runnable example based on the code above, refer to the following REPL samples: