Accordion

BsAccordion wraps the framework-agnostic <mp-accordion> web component. Headers and bodies come from BsAccordionItem, which renders them as siblings so the element can place each one in its own slot.

With JavaScript disabled the accordion stays interactive: the server-rendered shadow DOM carries a hidden radio (or checkbox, under multi) per tab, so opening and closing are pure CSS.

Single-open

ProfileProfile contentSign inSign-in contentPaymentPayment content

Last toggle:

Multi

ProfileProfile contentSign inSign-in contentPaymentPayment content

Nested

Closing an outer tab collapses every accordion inside it, at any depth.

ProfileEmailinfo@example.comUsernameuser-nameSign inSign-in content

Source