Widget 1 Content: This is the controlled content that can be expanded or collapsed. It might contain various elements like paragraphs, lists, or even images.
Widget 2 Content: Here's some more information. This widget demonstrates how multiple expand/collapse sections can exist independently on the same page.
You can use this pattern for FAQs, detailed descriptions, or hiding less important information until needed.
This is the final example. Notice how the button text changes to reflect the current state of the controlled content.
Tip: The transition effect makes the expansion and collapse smoother.