Prevent the Expand or Collapse Item in Blazor Accordion Component

17 Mar 20255 minutes to read

You can prevent the expand and collapse actions of an accordion item for specific conditions. For example, if there is a button in the accordion header, clicking on it should prevent the accordion item from expanding or collapsing.

This can be achieved by adding conditional logic in the Accordion’s Expanding and Collapsing events.

The following code example demonstrates how to prevent expand and collapse actions when interacting with controls inside the accordion header:

• DropDownList - Prevents accordion item expand/collapse when:
  • Opening the dropdown using the OnOpen event
  • Closing the dropdown using the OnClose event
  • Selecting an item using the ValueChange event
• Button - Prevents accordion item expand/collapse when clicking the button using the onclick event

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Collapsing="OnCollapsing"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Expanded="true">
            <HeaderTemplate>
                <SfDropDownList TValue="string" TItem="Countries" Placeholder="Select a country" DataSource="@Country" Width="120">
                    <DropDownListEvents TValue="string" TItem="Countries" OnOpen="OnOpen" OnClose="OnClose" ValueChange="OnChange"></DropDownListEvents>
                    <DropDownListFieldSettings Value="CountryName"></DropDownListFieldSettings>
                </SfDropDownList>
            </HeaderTemplate>
            <ContentTemplate>
                <div>Dropdown Content</div>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem>
            <HeaderTemplate>
                <SfButton Content="@ButtonText" @onclick="AddRemoveItem">
                </SfButton>
            </HeaderTemplate>
            <ContentTemplate>
                <div>Button Content</div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code
{
    public bool IsDropdown = false;
    public bool IsDropdownItemChanged = false;
    public bool IsButton = false;
    public string ButtonText = "OnClick";

    public List<Countries> Country = new List<Countries>() {
        new Countries(){ CountryName= "Australia", CountryId= "2" },
        new Countries(){ CountryName= "United States", CountryId= "1" },
    };
    public class Countries
    {
        public string CountryName { get; set; }
        public string CountryId { get; set; }
    }
    public void OnOpen()
    {
        IsDropdown = true;
    }
    public void OnClose()
    {
        IsDropdown = !IsDropdownItemChanged;
    }
    public void OnChange()
    {
        IsDropdownItemChanged = true;
    }
    public void AddRemoveItem()
    {
        IsButton = true;
    }
    public void OnExpanding(ExpandEventArgs args)
    {
        if (IsButton || IsDropdown)
        {
            args.Cancel = true;
            PreventItem();
        }
    }
    public void OnCollapsing(CollapseEventArgs args)
    {
        if (IsButton || IsDropdown)
        {
            args.Cancel = true;
            PreventItem();
        }
    }
    private void PreventItem()
    {
        if (IsButton)
        {
            IsButton = false;
        }
        else if (IsDropdown)
        {
            IsDropdown = false;
            IsDropdownItemChanged = false;
        }
    }
}