Expand all AccordionItems

Is there a straight forward way to expand or collapse all of an Accordion's items from an external button?
Setting the Selected property of the AccordionItem will only inverse the item's current state which makes it rather cumbersome to use.

Did you try the Expanded property?

I'm afraid I cannot find any Expanded property?

RadzenAccordionItem has Expanded property. Here is how we use it: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/MainLayout.razor#L83

I tried the below, but nothing happens when I change the value of the bool expandedFlag. I want the user to be able to use the chevron to expand/collapse single items, but also to have a separate button that changes all AccordionItems to expanded or collapsed at once. How can I do that?

<RadzenAccordionItem @bind-Expanded="@expandedFlag"


Do these things:

In each accordion item:
The boolean and the click handler of your button:

@iliyan.kulishev - That is what I tried first. The problem is that this will only inverse the current state, meaning that items that are already expanded individually by the user will be collapsed and vice versa.

I suppose I could keep track of each item's state by listening to the Expand and Collapse events, but I'm still hoping that there is an easier way?


I see what you mean, yeah.

  1. It would be nice if CollapseAll, ExpandAll methods on the accordion ref were available.

  2. Most importantly, trying to work with Selected on accordion item exposes a bug:

When you change the value of parameter Selected, it passes the accordion item to SelectItem
SelectItem expands/collapses the item if it exists/doesn't in the collection of expanded indexes.
Upon adding an item, the value of item.Selected is taken into account. But this is not the case in RemoveItem()
The statements inside the if should be executed only if( ! item.Selected).

@korchev - Any plans for adding ExpandAll/Collapse all functionallity?