Expand/Collapse Widgets

This is a simple expand/collapse widget built using HTML, CSS, and JavaScript. It's designed to progressively disclose content, making your page cleaner and easier to navigate.

Click the button above to toggle the visibility of this content area. Each widget on this page operates independently.

Key Features:

• Independent operation: Each widget functions on its own.
• Smooth transitions: Content expands and collapses gracefully.
• Accessible: Uses ARIA attributes for better screen reader compatibility.
• Customizable: Easily styleable with CSS.

How to Use:

1. Wrap your toggle button and content in a .example div.
2. Give your toggle button the class .toggle.
3. Give your collapsible content div the class .details.
4. Ensure the aria-controls attribute on the button matches the id of the content div for accessibility.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This content is a bit longer to demonstrate how the dynamic max-height works effectively for varying content sizes.

Sub-heading

Even more content to push the boundaries.

• Bullet 1
• Bullet 2
• Bullet 3 that is particularly long and might wrap