HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: details

The HTML <details> tag is used to create a disclosure widget in a web page. This widget allows the user to show or hide additional information on the page. The <details> tag is often used in conjunction with the <summary> tag, which provides a summary or title for the additional information.

The <details> tag is a relatively new addition to HTML, having been introduced in HTML5. It is used to create a disclosure widget, which is a user interface element that allows the user to show or hide additional information on the page. When the page is loaded, the additional information is hidden by default, but the user can click on the disclosure widget to show it.

The <details> tag can contain any HTML content, including text, images, and other HTML tags. The <summary> tag is used to provide a summary or title for the additional information. When the page is loaded, the summary is displayed, and the additional information is hidden. When the user clicks on the summary, the additional information is displayed.

Example 1: Basic Usage

The following code demonstrates the basic usage of the <details> tag:

  <details>
    <summary>Click to show additional information</summary>
    <p>This is some additional information that can be shown or hidden.</p>
  </details>

In this example, the <details> tag contains a <summary> tag and a <p> tag. The summary provides a title for the additional information, and the <p> tag contains the additional information itself. When the page is loaded, the summary is displayed, and the additional information is hidden. When the user clicks on the summary, the additional information is displayed.

Example 2: Nested Usage

The following code demonstrates the nested usage of the <details> tag:

  <details>
    <summary>Click to show additional information</summary>
    <details>
      <summary>Click to show even more information</summary>
      <p>This is some additional information that can be shown or hidden.</p>
    </details>
  </details>

In this example, the <details> tag is nested inside another <details> tag. This allows for multiple levels of disclosure widgets. When the page is loaded, the outer summary is displayed, and the inner <details> tag and its summary are hidden. When the user clicks on the outer summary, the inner <details> tag and its summary are displayed. When the user clicks on the inner summary, the additional information is displayed.

Example 3: Styling

The following code demonstrates how to style the <details> tag:

  <style>
    details {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px;
    }
    summary {
      font-weight: bold;
      cursor: pointer;
    }
  </style>
  <details>
    <summary>Click to show additional information</summary>
    <p>This is some additional information that can be shown or hidden.</p>
  </details>

In this example, the <style> tag is used to style the <details> and <summary> tags. The <details> tag is given a border, border-radius, and padding, while the <summary> tag is given a font-weight of bold and a cursor of pointer. This makes the disclosure widget more visually appealing and easier to use.

Activity