Expand/Collapse Widget Examples

Example 1: FAQ Item

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

Example 2: More Information

This section contains extra information that is hidden by default. Click the button to toggle its visibility.

Detail point one.
Detail point two.
Detail point three.

Example 3: Code Snippet

function toggleDetails(button) {
    const targetId = button.getAttribute('data-target');
    const details = document.getElementById(targetId);
    const isExpanded = details.classList.toggle('expanded');
    button.setAttribute('aria-expanded', isExpanded);
}