Expand/Collapse Widget Demonstration

Semantic HTML means using HTML elements according to their intended meaning, rather than just for presentation. For example, using <header>, <nav>, <main>, <section>, and <footer> helps describe the structure of the document to browsers, assistive technologies, and search engines.

Using <button> for interactive controls (like this one) instead of a generic <div> is another key part of semantic HTML, as it provides built-in keyboard and screen reader accessibility.

Coast redwoods (Sequoia sempervirens) are the tallest trees on Earth. They can grow over 350 feet (107 meters) tall and live for more than 2,000 years.

Their bark is incredibly thick—up to 12 inches—which makes them resistant to fire and insects. Redwoods also have a unique ability to absorb moisture from fog through their leaves.

These ancient giants are native to a narrow strip of the Pacific coast of the United States, primarily in northern California and southern Oregon.

Mouse Users: Click the button to expand or collapse the content.

Keyboard Users: Use the Tab key to navigate to the button. Press Enter or Space to toggle the content.

Screen Reader Users: The button announces its expanded or collapsed state. The controlled content is marked as a region with an accessible name from the button.

The widget uses CSS transitions for a smooth visual experience and includes a clear visual focus indicator for keyboard navigation.