Expand / Collapse Widget Examples

Each widget below is wrapped in a div.example. The content that is shown/hidden uses the class "details". Buttons control those containers via aria-controls and aria-expanded.

Basic details toggle

Click the button to reveal or hide the content.

Initially expanded

This example starts open. The JS reads the initial aria-expanded state.

Notifications

Email: enabled
Push: disabled

Privacy

Profile visibility: Friends only

Long content & nested widget

Demonstrates smooth animation on taller content and nesting.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Suspendisse potenti. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

More options

All examples above use elements with class="details" as the controlled content containers and are wrapped in a div.example.