Is it possible to have an accordion inside an AccordionItem.Content ?

[Sébastien]

I try to have an accordion inside an AccordionItem.Content and nothing is shown.

The first level is show correctly (so Category01 and Category02), but if I expand the first one (category01), nothing is shown, but the second (Category02), the label (not an Accordion), is shown correctly.

Is it possible to have an accordion inside an AccordionItem.Content ? If yes, how it's possible ?

Thank you,

<syncfusion:SfAccordion ExpandMode="SingleOrNone">

                <syncfusion:SfAccordion.Items>

                    <syncfusion:AccordionItem>

                        <syncfusion:AccordionItem.Header>

                            <Label TextColor="#495F6E" Text="Category01" HeightRequest="50" VerticalTextAlignment="Center"/>

                        </syncfusion:AccordionItem.Header>

                        <syncfusion:AccordionItem.Content>

                            <StackLayout>

                            <syncfusion:SfAccordion>

                                <syncfusion:SfAccordion.Items>

                                    <syncfusion:AccordionItem>

                                        <syncfusion:AccordionItem.Header>

                                            <Label TextColor="#495F6E" Text="Question01-Category01" HeightRequest="50" VerticalTextAlignment="Center"/>

                                        </syncfusion:AccordionItem.Header>

                                        <syncfusion:AccordionItem.Content>

                                            <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF">

                                                <Label TextColor="#303030" Text="Response01" HeightRequest="50" VerticalTextAlignment="Center"/>

                                            </Grid>

                                        </syncfusion:AccordionItem.Content>

                                    </syncfusion:AccordionItem>

                                    <syncfusion:AccordionItem>

                                        <syncfusion:AccordionItem.Header>

                                            <Label TextColor="#495F6E" Text="Question02-Category01" HeightRequest="50" VerticalTextAlignment="Center"/>

                                        </syncfusion:AccordionItem.Header>

                                        <syncfusion:AccordionItem.Content>

                                            <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF">

                                                <Label TextColor="#303030" Text="Response02" HeightRequest="50" VerticalTextAlignment="Center"/>

                                            </Grid>

                                        </syncfusion:AccordionItem.Content>

                                    </syncfusion:AccordionItem>

                                </syncfusion:SfAccordion.Items>

                            </syncfusion:SfAccordion>

                            </StackLayout>

                        </syncfusion:AccordionItem.Content>

                    </syncfusion:AccordionItem>

                    <syncfusion:AccordionItem>

                        <syncfusion:AccordionItem.Header>

                            <Label TextColor="#495F6E" Text="Category02" HeightRequest="50" VerticalTextAlignment="Center"/>

                        </syncfusion:AccordionItem.Header>

                        <syncfusion:AccordionItem.Content>

                            <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF">

                                <Label TextColor="#303030" Text="Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties." HeightRequest="50" VerticalTextAlignment="Center"/>

                            </Grid>

                        </syncfusion:AccordionItem.Content>

                    </syncfusion:AccordionItem>

                </syncfusion:SfAccordion.Items>

            </syncfusion:SfAccordion>

[Lakshmi Natarajan]

Hi Sebastien, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “How to use Accordion inside Accordion.Content” from our end. We would like to let you know that you need to set HeightRequest for inner Accordion which will resolve the reported issue. Please refer the following code snippet from following, 

 

Xaml: Set HeightRequest for inner Accordion. 

 

<syncfusion:SfAccordion ExpandMode="SingleOrNone"> 

            <syncfusion:SfAccordion.Items> 

                <syncfusion:AccordionItem> 

                    <syncfusion:AccordionItem.Header> 

                        <Label TextColor="#495F6E" Text="Category01" HeightRequest="50" VerticalTextAlignment="Center"/> 

                    </syncfusion:AccordionItem.Header> 

                    <syncfusion:AccordionItem.Content> 

                        <StackLayout> 

                            <syncfusion:SfAccordion HeightRequest="200"> 

                                <syncfusion:SfAccordion.Items> 

                                    <syncfusion:AccordionItem> 

                                        <syncfusion:AccordionItem.Header> 

                                            <Label TextColor="#495F6E" Text="Question01-Category01" HeightRequest="50" VerticalTextAlignment="Center"/> 

                                        </syncfusion:AccordionItem.Header> 

                                        <syncfusion:AccordionItem.Content> 

                                            <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> 

                                                <Label TextColor="#303030" Text="Response01" HeightRequest="50" VerticalTextAlignment="Center"/> 

                                            </Grid> 

 

                                        </syncfusion:AccordionItem.Content> 

                                    </syncfusion:AccordionItem> 

                                    <syncfusion:AccordionItem> 

                                        <syncfusion:AccordionItem.Header> 

                                            <Label TextColor="#495F6E" Text="Question02-Category01" HeightRequest="50" VerticalTextAlignment="Center"/> 

                                        </syncfusion:AccordionItem.Header> 

                                        <syncfusion:AccordionItem.Content> 

                                            <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> 

                                                <Label TextColor="#303030" Text="Response02" HeightRequest="50" VerticalTextAlignment="Center"/> 

                                            </Grid> 

                                        </syncfusion:AccordionItem.Content> 

                                    </syncfusion:AccordionItem> 

                                </syncfusion:SfAccordion.Items> 

                            </syncfusion:SfAccordion> 

                        </StackLayout> 

                    </syncfusion:AccordionItem.Content> 

                </syncfusion:AccordionItem> 

                <syncfusion:AccordionItem> 

                    <syncfusion:AccordionItem.Header> 

                        <Label TextColor="#495F6E" Text="Category02" HeightRequest="50" VerticalTextAlignment="Center"/> 

                    </syncfusion:AccordionItem.Header> 

                    <syncfusion:AccordionItem.Content> 

                        <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> 

                            <Label TextColor="#303030" Text="Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties." HeightRequest="50" VerticalTextAlignment="Center"/> 

                        </Grid> 

                    </syncfusion:AccordionItem.Content> 

                </syncfusion:AccordionItem> 

            </syncfusion:SfAccordion.Items> 

        </syncfusion:SfAccordion> 

 

We have attached the workable sample based on your requirement. Please download the sample from following link, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccordionSample-1737666583 

 

Please check the sample and let us know if you need any further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Ajay Tyagi]

Hello Team,
Hope you are doing good!

Can the dynamic size be based on the content for inner Accordion ?

Regards

Ajay

[Lakshmi Natarajan]

Hi Ajay,

You can achieve your requirement by using DynamicSizeMode as Content for Accordion as mentioned below,

<syncfusion:SfAccordion DynamicSizeMode="Content" ExpandMode="SingleOrNone">

    <syncfusion:SfAccordion.Items>

        <syncfusion:AccordionItem>

            <syncfusion:AccordionItem.Header>

                <Label TextColor="#495F6E" Text="Category01" HeightRequest="50" VerticalTextAlignment="Center"/>

            </syncfusion:AccordionItem.Header>

                   

            <syncfusion:AccordionItem.Content>

                <StackLayout>

                    <syncfusion:SfAccordion DynamicSizeMode="Content" ExpandMode="MultipleOrNone">

                        ...

                    </syncfusion:SfAccordion>

                </StackLayout>

            </syncfusion:AccordionItem.Content>

        </syncfusion:AccordionItem>

    </syncfusion:SfAccordion.Items>

</syncfusion:SfAccordion>

Please refer to our user guidance document regarding the same in the following link,

UG link: https://help.syncfusion.com/xamarin/accordion/item-size-customization#autofit-the-accordion-based-on-content

We have attached the modified sample for your reference. Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan

Attachment: 151953_1e6b4892.zip