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

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.

       @(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:

• Sample code with the Expansion Panel HtmlHelper
• Sample code with the Expansion Panel TagHelper

More ASP.NET Core Expansion Panel Resources

• ASP.NET Core Expansion Panel Documentation

• ASP.NET Core Expansion Panel Demos

• ASP.NET Core Expansion Panel Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Expansion Panel for ASP.NET Core

• Server-Side API Reference of the Expansion Panel for ASP.NET Core

• Server-Side TagHelper API Reference of the Expansion Panel for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base