Expand/Collapse Widgets Demo

This is the content for Section 1. It's hidden by default and appears when you click the button.

• Item A: More detailed information.
• Item B: Another piece of content.
• Item C: The final item in this list.

You can put any HTML content inside this collapsible area.

Here is the content for Section 2. This widget also demonstrates the same expand/collapse functionality.

It can contain paragraphs, images, and other block-level elements.

Feel free to click the button above to hide or show this text and image.

This demo illustrates how to create simple expand/collapse widgets using basic HTML, CSS, and JavaScript.

Each widget is wrapped in a <div class="example">.

The collapsible content itself is inside a <div class="details">, which is hidden by default using CSS display: none;.

JavaScript toggles the display property between none and block when the button is clicked, and updates the button's text accordingly.