Accordions inside table

[matachecosmin]

Hello everyone,

I'm currently working on an Orange project using Boosted v5.1.3. I have a task that involves mixing accordions within a table. Specifically, I want to group elements with the same country, service and sub-service into an accordion component. Please refer to the attached images for clarification.

Has anyone implemented a similar solution? Is it possible to achieve this with Boosted? I didn't make it work. At the moment, I'm developing a custom JavaScript solution.

Thank you!

[vprothais]

Hello @matachecosmin ,
I don't know what markup choices have been made for the sublines of a country in your case. Since it's a table, I assume there isn't a parent element gathering all these lines together.

You probably can use the collapse component which the Accordion is based on. This collapse component has a data-bs-target attribute to define which content should be hidden or shown when clicking on the item.

You could probably give a classname to all children, and use this classname in the data-bs-target attribute.
I've made a very simple Codepen example to share the idea with you.

[matachecosmin]

Hi @vprothais. Thanks for the idea, I will tried it.