Unable to use Nested Accordions

[dimitriharding]

Describe the bug While I am not sure if this is an issue, or maybe it's just a limited with the current Flowbit Accordion. Tried creating nested Accordions and ensuring that all of the ids used are unique and match the correct group of elements, but once you try to click the child Accordion to open it up, it closes the parent.

To Reproduce Steps to reproduce the behavior:

1. Go to example: https://typescript-prfna8.stackblitz.io/
2. See HTML: https://stackblitz.com/edit/typescript-prfna8?file=index.ts

Expected behavior Should be able to have nested Accordion, and child can open and close as expected without closing parent.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome
• Version : 104.0.5112.101

Additional context Bootstrap example: https://codepen.io/WinterSilence/pen/abpopXa

[zoltanszogyenyi]

Hey @dimitriharding,

I'll check this out. It may be a bug, a limitation of the Accordion API or you may have missed an id or attribute.

I'll get back with this.

[sdejewski10]

@zoltanszogyenyi Any update on this bug? Is there a workaround for using nested accordions with Flowbite?

[ZiTAL]

same here, using nested accordions triggered the parent accordion event

[jneuendorf]

I can reproduce the issue. The reason seems to be that all [data-accordion-target] descendants are considered items instead of just the "direct children".

For nesting, it would be required to associate all [data-accordion-target]s with their closest [data-accordion] parent. The code would looks something like this:

const targetCandidates = [
    ...$accordionEl.querySelectorAll('[data-accordion-target]'),
] as HTMLElement[]

// Group items by closest accordion parent to make nested accordions work.
const items = targetCandidates
    .filter(
        ($triggerEl) =>
            $triggerEl.closest('[data-accordion]') === $accordionEl,
    )
    .map(
        ($triggerEl): AccordionItem => ({
            id: $triggerEl.getAttribute('data-accordion-target'),
            triggerEl: $triggerEl,
            targetEl: document.querySelector(
                $triggerEl.getAttribute('data-accordion-target'),
            ),
            iconEl: $triggerEl.querySelector(
                '[data-accordion-icon]',
            ),
            active:
                $triggerEl.getAttribute('aria-expanded') === 'true'
                    ? true
                    : false,
        }),
    )

This should the fix parent-child relation, however it doesn't work for me yet. 😕

---

UPDATE:

The code does work 🥳. There were just a few problems due to automatic initialization (which I cannot yet use because of the "bug"). So it will hopefully become obsolete, once it's fixed.

[jneuendorf]

I had the time to update Flowbite and verify that nested accordions work.

However, in addition to init functions attached to window (new feature) in the same release (1.6.6, it would be very helpful to be able to access initialized components (not only accordions). The following options come to my mind:

1. like a static member of e.g. Accordion: window.Accordion.instances
2. via a function-based API, e.g. window.Accordion.getInstances()

For example, for opening a certain nested accordion (not a build time) without having access to auto-initialized accordions, one has to

• either reimplement the initialization logic and set active: true for the wanted accordion
• or trigger click events after initialization

Being able to access the Accordion instances enables more control and simplifies finding the correct accordion instance.

Since there are already quite a few Flowbite variables attached to window, a namespace would reduce the window-namespace pollution: window.Flowbite.Accordion, window.Flowbite.initAccordions etc.

@zoltanszogyenyi Should I open a new issue for this feature request?

[zoltanszogyenyi]

We have nested accordions:

https://flowbite.com/docs/components/accordion/#nesting-accordions