Interactive examples showing different approaches to expanding and collapsing content.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.
This is a custom-controlled region that can be expanded and collapsed using a button.
It uses aria-controls and aria-expanded for accessibility. When expanded, the button indicates its current state and the controlled content is revealed.
Accordions are great for organizing large amounts of content by showing one section at a time.
This panel provides a brief overview and general information.
Here are more specific details and background information pertaining to the topic.
Only one accordion section is open at a time, and toggling one will close the others.
Q: Can I open multiple sections at once?
A: In this demo, the accordion keeps only one section open at a time for clarity.
Q: Is this accessible?
A: Buttons announce their expanded state and each panel is a labeled region.