How to expand and collapse accordion programatically?

[Unknown]

This is my razor file...

<SfAccordion>

            <AccordionItems>

                <AccordionItem Expanded="@IsAccordianExpanded">

                    <HeaderTemplate>AdvanceSearch</HeaderTemplate>

                    <ContentTemplate>

                        <div class="main-filter-section">

                            <div class="search-filter">

                                <div class="search-box">

                                    <SfAutoComplete @ref="@KeywordAutoCompleteObj" TValue="string" TItem="string" Placeholder="Search..."

                                                    DataSource="@KeywordSuggestions" @bind-Value="@QueryPhrase">

                                        <AutoCompleteTemplates TItem="string">

                                        </AutoCompleteTemplates>

                                        <AutoCompleteEvents TValue="string" Filtering="@OnFiltering"></AutoCompleteEvents>

                                    </SfAutoComplete>

                                </div>

                            </div>

                            <div class="search-filter">

                                <div class="search-box search-box-button">

                                    <SfButton Disabled="@IsBusy" @onclick="SearchClicked">Search</SfButton>

                                    <SfButton @onclick="CancelClicked">Cancel</SfButton>

                                </div>

                            </div>

                        </div>

                    </ContentTemplate>

                </AccordionItem>

            </AccordionItems>

        </SfAccordion>

Need to collapse on both button click events.

[Alagumeena Kalaiselvan]

Hi Richy, 

Greetings from Syncfusion support! 

We have checked your reported issue and you can programmatically collapse the Accordion items using EnableItem public method by passing specified item index and Boolean value. We have modified your shared code with below highlighted changes. 

<SfAccordion @ref="AcrdnObj"> 

   </AccordionItems> 

     ... 

    <div class="search-filter"> 

                        <div class="search-box search-box-button"> 

                            <SfButton Disabled="@IsBusy" @onclick="SearchClicked">Search</SfButton> 

                            <SfButton @onclick="CancelClicked">Cancel</SfButton> 

                        </div> 

                    </div> 

 

                </div> 

            </ContentTemplate> 

    </AccordionItems> 

</SfAccordion> 

 

@code{ 

    SfAccordion AcrdnObj; 

    public void SearchClicked() 

    { 

        AcrdnObj.ExpandItem(false, 0);   // To dynamically expand or collapse the item based on the Boolean value and item index 

    } 

    public void CancelClicked() 

    { 

        AcrdnObj.ExpandItem(false, 0); 

    } 

... 

} 

For the same, we have prepared a sample for your reference and same can be available in following link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Accordion-1628156831 

Please get back to us, if you need further assistance. 

Regards 

Alagumeena.K 

[Ajith Gopalakrishnan]

Hi Richy, 

Greetings from Syncfusion support! 

We have checked your reported issue and you can programmatically collapse the Accordion items using EnableItem public method by passing specified item index and Boolean value. We have modified your shared code with below highlighted changes. 

<SfAccordion @ref="AcrdnObj"> 

   </AccordionItems> 

     ... 

    <div class="search-filter"> 

                        <div class="search-box search-box-button"> 

                            <SfButton Disabled="@IsBusy" @onclick="SearchClicked">Search</SfButton> 

                            <SfButton @onclick="CancelClicked">Cancel</SfButton> 

                        </div> 

                    </div> 

 

                </div> 

            </ContentTemplate> 

    </AccordionItems> 

</SfAccordion> 

 

@code{ 

    SfAccordion AcrdnObj; 

    public void SearchClicked() 

    { 

        AcrdnObj.ExpandItem(false, 0);   // To dynamically expand or collapse the item based on the Boolean value and item index 

    } 

    public void CancelClicked() 

    { 

        AcrdnObj.ExpandItem(false, 0); 

    } 

... 

} 

For the same, we have prepared a sample for your reference and same can be available in following link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Accordion-1628156831 

Please get back to us, if you need further assistance. 

Regards 

Alagumeena.K 

Thanks... That Works...

But find a issue that when the above mentioned accordion used as a component inside another parent component, the accordion only expanding on the second click at the expand icon at right end. The expanding event is only firing on the second click. This happens only at first time when the accordion is in collapsed state initially...

[Alagumeena Kalaiselvan]

Hi Ajith, 

Thanks for your update. 

We have investigate on your reported query “Expanding event is only firing on the second click” with Accordion which Accordion item in collapsed state initially and loaded inside another parent component but we regret to let you know that issue could not be replicated at our end. Refer the below code for that. 

<SfTab> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Paris"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <SfAccordion @ref="AcrdnObj"> 

                    <AccordionItems> 

                     ... 

                    <AccordionEvents Expanding="OnExpand"></AccordionEvents> 

                </SfAccordion> 

            </ContentTemplate> 

        </TabItem> 

        ... 

    </TabItems> 

</SfTab> 

 

@code{ 

    public void OnExpand(ExpandEventArgs args) 

    { 

        Console.WriteLine("Expanding event triggered"); 

    } 

   ... 

} 

We have modified the already shared sample for your reference which can be get by the following link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Accordion882935507 

Please check with shared sample and revert us with below details, if this issue still persist 

• Share issue reproducing sample if possible
• Which parent component  you have used in sample end
• Try to reproduce your issue with shared sample

Regards 

Alagumeena.K