This widget uses the native <details> and <summary> HTML tags. It requires zero JavaScript and works even if scripts are disabled. It is semantic and accessible by default.
The browser handles the state management automatically.
This method links a hidden checkbox to a label. When you click the label, the checkbox state changes. We use the :checked pseudo-class to change the max-height of this content area.
This allows for smooth CSS transitions on height, which the native details tag struggles with natively.
This is the traditional way to build accordions using JavaScript. An event listener toggles a class on the button and changes the display property of this container.
Note: We manually manage ARIA attributes (like aria-expanded) to ensure screen readers understand the state.