Accordion issue with Flowbite 2.2

[BrynCB]

Describe the bug

Flowbite 2.2 is unable to work flexibly with accordions in the same way that 1.8.1 (and possibly other versions) could. In my custom blocks for Gutenberg, each accordion (H2 + content div) is wrapped in a div due to the nature of repeatable InnerBlocks in the WordPress post editor. The accordions are used for an FAQ.

The data attributes are still sequentially numbered, but FAQ items can be interspersed on a page across multiple block instances (for example, when multiple FAQ sections are used, each with its own heading). That's not to say data attributes reset the count each time - they are sequential down a given page no matter how many separate blocks are present. This was not a problem with 1.8.1 - which I've reverted to for the time being - and is a problem with 2.2. When using 2.2 (the latest as of writing this), only the FAQ items in the last block containing accordion code are functional. The other accordion items on any given page are unresponsive.

To Reproduce Steps to reproduce the behaviour:

1. Copy any of the accordion blocks from the Flowbite block library
2. Place several on a test page
3. Add some JS to ensure that they are sequentially numbered despite being broken into different sections.
4. (Optional, may be necessary) Wrap the H2 + content div pairs in a div. No idea if this is relevant.
5. Interact with accordion items on the frontend.

Expected behaviour All accordion items expand on click. If only one should be expanded at one time, they should collapse appropriately even when an item in another section/block is selected. This is how it works for me with 1.8.1.

Devices: Behaviour is consistent for me across different browsers and devices.

Additional context I am not using Flowbite in a React or Vue project. This is a WordPress plugin with PHP, JS, HTML & CSS. I haven't experienced other issues with Flowbite's JS features, and 1.8.1 works flawlessly for me.

[BrynCB]

I made a minimal demo in CodePen here: https://codepen.io/brynb/pen/abMbrzY/a9d8a848219023a5484c156818cb3ba3

Frontend-only view: https://codepen.io/brynb/live/abMbrzY/a9d8a848219023a5484c156818cb3ba3

As expected, despite the sequential numbering throughout the page, only the last FAQ section is working with Flowbite 2.2.

[zoltanszogyenyi]

Hey @BrynCB,

Thanks for opening up the issue. I'll have a look at this after the holidays for the v2.2.2 release.

Cheers, Zoltan

[girishgr8]

@zoltanszogyenyi Is there any update on this bug?

[elpdev]

I'm experiencing the same issue here.

[hs-dliaska]

same issue

[agil3st]

version: "flowbite": "^2.3.0" I tried to loop using Laravel for but only the last item is working

@for ($i = 0; $i < 3; $i++)
    <div id="accordion-flush" data-accordion="collapse"
        data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
        data-inactive-classes="text-gray-500 dark:text-gray-400">
        <h2 id="accordion-flush-heading-{{ $i }}">
            <button type="button"
                class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3"
                data-accordion-target="#accordion-flush-body-{{ $i }}" aria-expanded="false"
                aria-controls="accordion-flush-body-{{ $i }}">
                <span>What are the differences between Flowbite and Tailwind UI?</span>
                <x-tabler-circle-chevron-down />
            </button>
        </h2>
        <div id="accordion-flush-body-{{ $i }}" class="hidden"
            aria-labelledby="accordion-flush-heading-{{ $i }}">
            <div class="py-5 border-b border-gray-200 dark:border-gray-700">
                <p class="mb-2 text-gray-500 dark:text-gray-400">body</p>
            </div>
        </div>
    </div>
@endfor

https://github.com/user-attachments/assets/38957547-509d-4f23-abb7-0e6e24fce179