Collapse in nested accordion

Dash Python
1

Hi,

I want to create nested accordion. In order to do that, I append to the children of my main accordion multiple accordions, in the following manner:

main accordion:
output = dmc.Accordion(, id=‘Accordion_rawData’ , value=‘data’)
output2 = dmc.Accordion([…))
output.children.append(dmc.AccordionItem(output2,value=raw))

I do get my nested accordion, but when user expanded first accordion and click second accordion. First accordion is closed. When I changed dmc.Accordion to dmc.AccordionMultiple it worked, but this is not what I want ( all the items stay open).

Any ideas on how can I do it?

2

Hello,

if you are using dash-mantine-components, you can use this component now for the problem you are facing.
dmc.AccordionMultiple. This component allows for multiple accordians to open and collapse simultaneously.

You can also look at dash-bootstrap-components and it also has a Accordian Component, that has the attribute always_open=True. check this URL
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/accordion/#:~:text={item}"-,Always%20Open,-Add%20always_open%3DTrue

3

Thanks for your response.
The AccordionMultiple indeed allows me to open all the nested accordions, but I don’t want them to stay open when I click them. So for example, if I have this shell:

main accordion:
first accordion
second accordion

If I’m clicking on the first accordion, and then on the second accordion, I want the first accordion to close.

Regarding the dbc.Accordion component, unfortunately I cant use it because it doesn’t have features that I need ( ring process etc’ )

4

Hi @MaayanShoshan, this might be interesting: