This simple widget uses a button to toggle the visibility of the content. The button’s aria-expanded attribute and the content’s hidden attribute stay synchronized to keep things accessible.
This panel adds a touch of animation by transitioning the maximum height and opacity. The JavaScript calculates the natural height when expanding to ensure the animation is smooth.
Use transitions sparingly and respect the prefers-reduced-motion media feature for users who opt out of animations.
aria-controls, update aria-expanded as the state changes, and toggle the hidden attribute (or aria-hidden) on the content.