Expand/Collapse Widget Demo

Example 1: Basic Info

This is the first example of controlled content. It starts collapsed and can be expanded by clicking the button above.

Example 2: FAQ Section

This widget demonstrates a simple expand/collapse functionality using HTML, CSS, and JavaScript. It's useful for accordions, FAQs, or hiding/showing content.

Example 3: Long Content

Here is some longer content that might require scrolling when expanded:

  1. Step 1: Prepare your materials.
  2. Step 2: Follow the guidelines carefully.
  3. Step 3: Review and adjust as necessary.
  4. Step 4: Finalize your work.
  5. Step 5: Share with others.

Additional details can go here, making the content longer to demonstrate the smooth transition effect.