Expand/Collapse Widgets

This is the controlled content for Section 1. It remains hidden until the button above is clicked. You can place any HTML elements inside this .details container.

The expand and collapse actions are animated using CSS transitions for a smoother user experience. The JavaScript simply toggles a class on the parent element, which then drives the CSS changes.

Here you'll find more detailed information related to Section 2.

• Item 1: This list item is part of the expanded content.
• Item 2: Another detail you might want to show or hide.
• Item 3: And a third one, for good measure.

Feel free to click the button to expand or collapse this section.

This section has less content but demonstrates the same functionality.