Expand/Collapse Widget Demo

Example 1: Basic Information

This is the first example of an expand/collapse widget. Click the header to toggle the visibility of this content. The transition is smooth and animated.

  • Item 1
  • Item 2
  • Item 3

Example 2: Detailed Description

This second example demonstrates more detailed content that can be expanded. It includes paragraphs, lists, and other elements to show how the widget handles various types of content.

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

  1. First step
  2. Second step
  3. Third step

Example 3: FAQ Section

Q: What is this widget used for?

A: This widget is used to create expandable sections that hide or show content on demand, improving user experience by reducing clutter.

Q: How does the animation work?

A: The animation uses CSS transitions on the max-height property for a smooth expand/collapse effect.