Reverse #22138 and detach accordion from card without requiring 'data-children'

[pvdlg]

#22138 was merge in order to detach accordion from .card and is based on a new attribute data-children that require to reference the class of the child.

This PR reverse #22138 and implement a more simple solution that does not require any new attribute.

I initially wanted to give my feedback on the original PR, but somehow forgot and remembered when I saw it merged...

[Johann-S]

I'm not sure if this is better or not, but you do a double find of children instead of one. So if they are a huge collapse it wont be fast as the previous PR

[pvdlg]

The find() method in JQuery go through the whole tree of child (life child, grand-child, grand-grand-child).
The children() go through only one level. So 2 calls to children() will most likely be faster than find() in case there is content in the .collapse (that would be more than 2 level). Most likely there would be content in the .collapse.

In addition calling children() twice might actually be faster than ${childrenSelector} > .show, ${childrenSelector} > .collapsing as it would loop on the child nodes in the tree rather than calling Sizzle/querySelector.

[pvdlg]

But frankly if there is a performance difference, one way or the other, it would be a matter nano seconds per collapsible. Unless you have an accordion with million of children the difference will be close to nothing.

I think the simplification for theBootstrap user (getting rid of data-children attribute) worth the few nano seconds that might be lost or gained.

[mdo]

Does any of this business with children and find affect nested accordions? #18632

[pvdlg]

In both cases the selector will select only the direct child the accordion that is collapsible, i.e .card or whatever you use in place of card.
So nested accordion would work independently of each other.

Maybe I can add a unit test for nested accordion. Would you prefer that in this PR or a different one ?

[pvdlg]

Actually forget my previous comment. The current implementation will not work with nested accordion as the selector ${childrenSelector} > .show, ${childrenSelector} > .collapsing will match each nested level (if they the collapsible use the same class passed in data-children), so the parent accordion will interfere with the child.

This PR will incidentally fix this issue as the children() will match only the collapsible directly inside the accordion and not the nested one.

[pvdlg]

@mdo, I added a unit test for nested accordions. It passes with this PR but doesn't in the current v4-dev.
So I can confirm that on the current v4-dev the nested accordion do not work and that this PR "incidentally" fix this issue.

[Johann-S]

LGTM 👍