Expanding Single Panel at a Time When Using Multiple Expansion Panels
Environment
| Product | Telerik UI for ASP.NET MVC Expansion Panel |
| Progress Telerik UI for ASP.NET MVC 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
clickevent 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.") )<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 REPL example on expanding a single panel when using multiple Expansion Panel components.