New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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 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.

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.")
    )
Html
    <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.

Expanding Single Panel at a Time When Using Multiple Expansion Panels

Environment

Description

Solution

More ASP.NET MVC Expansion Panel Resources

See Also