Expand/Collapse Widget Demo

This is the hidden content for the first widget. It appears smoothly when you click the button above. You can put any HTML content here, such as text, images, or forms.

This is the content for the second widget. Each widget operates independently. The expansion and collapse uses CSS transitions for a smooth effect.

• List item one
• List item two
• List item three

Here is another example with different content. The container with the details class is controlled by the button click.

Notice how the padding and background help separate this content visually.