Expand/Collapse Widget Examples

This widget reveals additional information about product features without overwhelming the page layout.

• Responsive: Works on mobile and desktop devices.
• Accessible: Uses semantic HTML and ARIA attributes.
• Customizable: Update colors, icons, and animation easily.

The following snippet shows how to toggle a section using vanilla JavaScript:

const button = document.querySelector('.toggle');
const panel = document.getElementById('panel');

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;
});

Notice how the aria-expanded attribute ensures screen readers announce the state change.