Expand/Collapse Widgets Demonstration

Basic Expand/Collapse

This is the content for the first widget. It demonstrates a basic expand/collapse functionality using JavaScript and CSS transitions.

You can place any HTML elements inside this .details container. For example, a list:

Accordion Style Content

Here's some additional information for the second widget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The transition makes the opening and closing feel smooth and user-friendly.

Initially Expanded Widget

This widget starts in an expanded state. Notice how the button text is pre-set to "Hide Content".

The expanded class is applied directly to the .details div in the HTML, and JavaScript handles the toggle.

It's useful for sections that are important but can be collapsed later. You can always collapse it by clicking the button.