Expand/Collapse Widget Demo

Example 1: Basic Widget

This is the hidden content that appears when you click the button. It can contain any HTML elements like paragraphs, lists, links, etc.

The expand/collapse animation is smooth and uses CSS transitions for a better user experience.

Example 2: Feature Details

Features of This Widget:

Smooth expand/collapse animation
Accessible and semantic HTML
Easy to customize with CSS
Works with vanilla JavaScript
Responsive design

Example 3: FAQ Section

This expand/collapse widget is commonly used for:

FAQ (Frequently Asked Questions) sections
Accordion menus
Product details and specifications
Collapsible navigation menus
Content organization and space saving

Example 4: Code Example

The implementation uses a simple JavaScript function to toggle classes:

function toggleWidget(button) {
    const details = button.nextElementSibling;
    button.classList.toggle('active');
    details.classList.toggle('active');
    button.querySelector('.toggle-icon')
           .classList.toggle('active');
}