Expand/Collapse Widgets

Welcome! This is your first expandable widget. Click the header to show or hide the content below. The smooth animation makes it pleasant to interact with.

• Smooth expand/collapse animations
• Fully customizable styling
• Accessible and keyboard-friendly
• Lightweight implementation
• Works on all modern browsers

Each widget consists of a clickable header button and a hidden content area. When you click the header, JavaScript toggles classes that control the max-height property, creating a smooth transition effect. The content smoothly expands and collapses with CSS animations.

Q: Can I have multiple widgets expanded at once?

A: Yes! Each widget is independent. Click multiple headers to expand them simultaneously.

Q: How do I customize the animation speed?

A: Modify the transition duration in the CSS. Look for the `.details` class and change the `0.3s` value.