Expand specific FluentAccordionItem with button

[bao86]

Hi there,

How I can select specific FluentAccordionItem and change Expanded property ?

<FluentAccordion>
    <FluentAccordionItem Expanded="true" Heading="Panel one">
        <FluentButton>Open Next Panel</FluentButton>
    </FluentAccordionItem>
        <FluentAccordionItem Expanded="false" Heading="Panel two">
        Panel two content
    </FluentAccordionItem>
</FluentAccordion>

When click on button it will collapse panel one and expand panel two

[vnbaaij]

See the example at https://fluentui-blazor.net/Accordion#accordiondefaultexam. The key point is that you need to work with the ActiveId (and set the Id per item by hand to prevent them from getting created automatically).

[bao86]

You can download the project here
https://github.com/bao86/Debug

[vnbaaij]

Line 6: <FluentAccordion @bind-ActiveId="@activeId">
Line 10:
Line 62:

Beginning of code block add:
bool info_expanded = true;
bool welcome_expanded = false;

At the end:
private void packageNextStep()
{
activeId = "accor-inst-welcome-prompt";
welcome_expanded = true;
info_expanded = false;

}

Just a guideline, adapt to your own needs...

[bao86]

Thank you :)
If I understand

Line 6 : <FluentAccordion @bind-ActiveId="@activeId">
Line 10 : <FluentAccordionItem Id="accor-package-info" Expanded="@info_expanded">
Line 62 : <FluentAccordionItem Id="accor-inst-welcome-prompt" Expanded="@welcome_expanded">

beginning of code block :

string activeId;
bool info_expanded = true;
bool welcome_expanded = false;

in the method :

private void packageNextStep()
{
    activeId = "accor-inst-welcome-prompt";
    welcome_expanded = true;
    info_expanded = false;
}

It's working fine :) thank you again but it works once.
If I collapase the "Welcome" Panel and then Expand "Info" Panel and finally click on "Next" again, is not working :(
Have to reload the page

[vnbaaij]

You need to reset the booleans when you cahange back. That is more general coding and not specifi to the library. You need to develop your own skills there

[bao86]

Thanks for your time and help :)