Expand/Collapse Widget Demonstration

This page demonstrates the native HTML <details> and <summary> elements to create expand/collapse widgets.

Example 1: Basic Information

Click to view more about Widgets

A widget is an interactive element of a graphical user interface (GUI). It can be used to display information, or to allow a user to interact with the system.

Common examples include buttons, text boxes, and scrollbars.

Example 2: Frequently Asked Questions

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

How do I use CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS can be applied in three main ways:

  • Inline styles: Using the style attribute directly on HTML elements.
  • Internal styles: Using a <style> element within the <head> section of the HTML document.
  • External styles: Linking to an external .css file using the <link> element in the <head>.
Can I embed images?

Yes, you can embed images using the <img> tag. For example:

<img src="image.jpg" alt="Description of image" width="200" height="150">

Always include the alt attribute for accessibility purposes.