Expand/Collapse Widget Examples

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 provides a smooth animation effect.

Example 2: Detailed Description

This second example contains more detailed information about the widget. It demonstrates how the content can hold multiple paragraphs or even lists and other HTML elements without any issues.

  • Item 1: Smooth transitions
  • Item 2: Responsive design
  • Item 3: Easy to implement

Example 3: FAQ Section

Q: How does the expand/collapse work?

A: It uses CSS transitions with max-height property and JavaScript to toggle a class that controls the visibility.

Q: Can I customize the animation speed?

A: Yes, modify the transition duration in the CSS to change the animation speed.