Expand/Collapse Widgets

Method 1: JavaScript & CSS Transition ▼

This widget uses a JavaScript function to toggle the height. This allows for a smooth CSS transition effect (`max-height`).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Another JS Widget ▼

Multiple widgets can exist on the same page independently.

  • Feature A
  • Feature B
  • Feature C
Method 2: Native HTML <details> ▼

This widget uses the native HTML <details> and <summary> tags. It works without any JavaScript!

Browser support is excellent, and it handles accessibility automatically.