Exclusive and independent stacks
The only difference between these two stacks is the name attribute on each details. Shared names make an accordion; omitting them lets every panel open at once. No script is involved either way, so both behave the same with JavaScript disabled.
Shared name="faq"
Opening one panel closes the other. The browser enforces it.
Is a single expandable region a different component?
No. One details element with .ui-collapsible is the whole component; a stack is several of them.
What closes the previously open panel?
The browser does, because every details element in the stack shares the same name attribute.
How much of this needs JavaScript?
None of it. Open state, keyboard, find-in-page, and exclusivity are all platform-owned.
No name
Every panel opens and closes on its own.
Is a single expandable region a different component?
No. One details element with .ui-collapsible is the whole component; a stack is several of them.
What closes the previously open panel?
The browser does, because every details element in the stack shares the same name attribute.
How much of this needs JavaScript?
None of it. Open state, keyboard, find-in-page, and exclusivity are all platform-owned.