Expand/Collapse Widgets
Examples using the native details element and custom toggles, with each widget wrapped in an example container.
1) Native details element
Project Information
This section uses the native HTML <details> and <summary> elements for an accessible disclosure.
- Status: In progress
- Owner: Team Delta
- Links: Roadmap, Milestones
Tip: Press Space or Enter on the summary to toggle.
2) Button-driven collapsible (with animation)
Latest changes in version 2.4.1:
- Fixed authentication timeout on slow networks
- Improved startup performance by 20%
- Added keyboard shortcuts for navigation
Uses ARIA attributes with a button to control a content region.
3) Simple accordion (only one open at a time)
High-level product overview and goals.
- Primary audience: Internal teams
- Focus areas: Reliability, Performance, UX
Implementation details and technical notes.
- API version: v3
- Auth: OAuth 2.0
- Storage: PostgreSQL 15
Answers to common questions.
- Where can I report bugs? Use the issue tracker.
- Is there SSO support? Yes, via SAML and OIDC.
Opening one section will close the others.