Expand/Collapse Widgets

Examples using a native details/summary element and a custom button-controlled region.

Native details/summary
What is the difference between cats and dogs?

Cats and dogs are both popular companion animals, but they often differ in behavior, training styles, and social needs.

  • Cats are typically more independent and may prefer quieter environments.
  • Dogs often enjoy structured training and social play.
  • Both benefit from consistent enrichment, veterinary care, and affection.

This widget uses the native <details> and <summary> elements. The container for the controlled content has the class details.

Custom button-controlled content
Accordion (button-controlled)