Button in header separate from expand/collapse

Question

Is there a way to have a button in the header of the accordion that does not trigger expand/collapse? Right now the whole header is clickable to expand/collapse so when I add a button to the header and click it, the expand collapse action occurs. I want to have a button in the header so that I can click it and something else happens but the accordion item stays in the same state it was in. Only clicking the expand/collapse icon should open and close it.

Swathi Ravi · Answer

Hi Joe,Thank you for reaching out and we are happy to assist you in achieving the desired behavior for expanding and collapsing the accordion only when clicking the specified icon.To implement this functionality, you can hide the default toggle icon and render a custom icon using the HeaderTemplate. Additionally, you can use the accordion’s Expanding, Collapsing, Expanded, and Collapsed events to control the behavior based on the custom icon click. Below is an example demonstrating this approach:

Laura Callahan

@code { private bool isToggleIconClicked = false; public void ToggleIconClicked() { isToggleIconClicked = true; } public void OnExpanding(ExpandEventArgs args) { if (!isToggleIconClicked) { args.Cancel = true; } } public void OnCollapsing(CollapseEventArgs args) { if (!isToggleIconClicked) { args.Cancel = true; } } public void OnExpanded(ExpandedEventArgs args) { isToggleIconClicked = !isToggleIconClicked; } public void OnCollapsed(CollapsedEventArgs args) { isToggleIconClicked = !isToggleIconClicked; }}Sample: Attached as a zip file.We hope this resolves your concern and makes the process seamless for you. If you have any further questions or need additional assistance, please don’t hesitate to contact us.Regards,Swathi Attachment: blazoraccordionexpandcollapseonlybyicon_67031a26.zip

Joe Sperlak · Answer

It looks like you're using a Syncfusion css class for the toggle icon? What about when you want all the accordion items to default as expanded. When I switch my code to use this solution, the icon is pointing down with the accordion item expanded, which is correct. But when you click to close it, the arrow stays as the one pointing down. Then if you click it again to expand the accordion item, the arrow icon flips to facing up which is then wrong.

Swathi Ravi · Answer

Joe, You can resolve the issue with the toggle icon not updating properly by dynamically updating the class names, as shown below:

Laura Callahan

@code { bool isFirstItemExpanded = true; bool isSecondItemExpanded = true; private bool isToggleIconClicked = false;} Sample: https://blazorplayground.syncfusion.com/VZheXACuUJCYcmUm Please try this solution and let us know if you need further assistance!