Expand/Collapse Widget Demo

Section 1: Introduction ▶

This is the collapsible content for the first section. It expands and collapses smoothly when you click the header. The widget uses CSS transitions for a nice animation effect.

Section 2: Features ▶
  • Smooth expand/collapse animation
  • Click to toggle functionality
  • Customizable styling
  • Accessible keyboard navigation (with additional JS)
Section 3: Usage ▶

To implement this widget, simply add the HTML structure with the appropriate classes and IDs. The JavaScript function handles the toggle behavior, and CSS provides the visual feedback and animations.

<div class="header" onclick="toggleDetails('id')">
    Header Text ▶
</div>
<div class="details" id="id">
    Content here
</div>