New to Telerik UI for ASP.NET Core? Download 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

  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:

More ASP.NET Core Expansion Panel Resources

See Also

In this article