How to expanding a set of accordions? - from 172828

[Jimmy De La Garza]

How would you go about expanding a set of accordions? for example, 

@foreach( ... )
{
   <SfAccordion>  
      @foreach ( ... ) //For the items
   </SfAccordion>
}

    

[Swathi Ravi]

Hi Jimmy,

Thank you for reaching out!

You can expand the set of accordion items by setting the Expanded property of  the AccordionItem, as shown in the below shared snippet.

<SfAccordion>

    <AccordionItems>

        @foreach (var item in AccordionData)

        {

            <AccordionItem Header="@item.Header" Content="@item.Content" Expanded="@item.Expanded"></AccordionItem>

        }

    </AccordionItems>

</SfAccordion>

@code {

    private List<AccordionItemModel> AccordionData = new List<AccordionItemModel>

    {

        new AccordionItemModel

        {

            Expanded = true,

            Header = "Margeret Peacock",

            Content = "Margeret Peacock was born on Saturday, 01 December 1990. Now lives at Coventry House Miner Rd., London, UK."

        },

        new AccordionItemModel

        {

            Expanded = false,

            Header = "Laura Callahan",

            Content = "Laura Callahan was born on Tuesday, 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London, UK."

        },

        new AccordionItemModel

        {

            Expanded = true,

            Header = "Albert Dodsworth",

            Content = "Albert Dodsworth was born on Thursday, 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle, USA."

        }

    };

}

Sample: https://blazorplayground.syncfusion.com/VtLpiLVAJNkSgVxR

Regards,

Swathi