This widget uses a button to reveal additional information. The content container has a details class to allow shared styling and animation.
You can include any markup inside, and it will expand smoothly when triggered.
Here are some curated resources to improve your UI interactions:
To start a section expanded, add the is-open class to the container and set hidden to false. Keep the button state synchronized with aria-expanded="true".
Providing clear label changes like “Hide tips” improves usability and ensures keyboard and screen reader users understand the current state.