HTML details Tag

What is a Details Tag?

An HTML5 element known as the details tag is employed by developers to construct dynamic and collapsible sections within a webpage. It consists of the concealed content, a nested summary tag for user-triggered display, and an opening details tag.

HTML <details> element is employed to define supplementary information on the webpage that users can choose to display or conceal as needed.

As per the W3C HTML guidelines, it functions as a disclosure widget allowing users to access more information or control options.

It is employed in conjunction with a corresponding tag referred to as <summary>. In essence, a summary tag is not mandatory; however, neglecting it will prompt the browser to display default text.

The <details> tag is responsible for enclosing the content you wish to display or conceal, while the <summary> tag includes the summary and title of the section.

This element proves to be particularly beneficial in enhancing user experience, organizing data, and offering users an engaging method to show or hide content. In contemporary web design, the details element serves as a valuable asset in creating dynamic and intuitive interfaces.

Syntax

The syntax of the details tag is as follows:

<details>

  <summary>Click to expand</summary>

</details>

Why do We Use the Details Tag?

There are several factors contributing to the popularity of the details tag.

1. Content Structuring

The element aids in structuring content by providing organized information in a presentable format. Programmers have the option to establish segments that users can expand or condense based on their preferences, enhancing the overall user experience.

1. Creating Interfaces with Enhanced User Experience

Details tags play a significant role in enhancing user engagement. Websites have the ability to declutter and simplify the user interface, allowing visitors to concentrate on the content that matters most to them by offering the option to expand or collapse specific sections.

1. Interactive Functionality

The tag enables dynamic interaction within a webpage, facilitating improved browsing experiences by allowing users to access additional content through interactive summaries.

1. Creating a more engaging and accessible design.

The utilization of the details tag in web development can significantly enhance accessibility and streamline the user experience. By correctly integrating this tag in HTML, it optimizes functionality, allowing content creators to efficiently generate and users to easily read and navigate through the content, especially when using screen readers and other assistive technologies.

1. Enhanced Space Utilization

By utilizing the details tag in HTML, we have the capability to optimize space on the webpage by managing content that may not be universally pertinent. This feature empowers users to choose whether to display or conceal a specific section, thus preventing overwhelming them with excessive information.

In summary, web developers have the option to employ the details tag to enhance the structure, interactivity, and user experience of websites. This feature is particularly beneficial for content that may need to be concealed or revealed based on user interaction.

Attributes of Details Tag

Within the details element, there are specific attributes that allow us to control the behavior and appearance of the element on a web page within HTML.

1. Open attributes

Boolean attributes in HTML fall under the category of open attributes. By utilizing the details tag, users can effortlessly view additional information without any manual intervention.

Example:

<details open> …</details>

2. Ontoggle attributes

The "ontoggle" attribute serves as an event handler attribute, allowing developers to specify a JavaScript function that gets executed when a user toggles the visibility of the details tag by opening or closing it.

Example:

<details ontoggle="myFunction()">  ... </details>

By leveraging these properties, programmers have the ability to introduce interactive functionality to the details element through JavaScript, altering its initial condition. The "ontoggle" attribute enables the execution of designated actions when users interact with the details element, whereas the "open" attribute is particularly advantageous for developers aiming to display particular content immediately.

Example 1

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Details Tag Example</title>

  <style>

    /* Optional: Styling for better presentation */

    details {

      border: 1px solid #ccc;

      padding: 10px;

      margin-bottom: 10px;

      border-radius: 5px;

    }



    summary {

      cursor: pointer;

      font-weight: bold;

    }



    /* Styling for open state */

    details[open] {

      background-color: #f0f0f0;

    }

  </style>

</head>

<body>



  <!-- Example 1: Basic Usage -->

  <details>

    <summary>Click to Expand</summary>

    <p>This is the hidden content that becomes visible when the user clicks the summary.</p>

  </details>



  <!-- Example 2: Default Open -->

  <details open>

    <summary>Default Open</summary>

    <p>This content is visible by default as the details tag has the "open" attribute.</p>

  </details>



  <!-- Example 3: Nested Details -->

  <details>

    <summary>Parent Details</summary>

    <p>This is the parent details content.</p>

    <details>

      <summary>Nested Details</summary>

      <p>This content is inside a nested details tag.</p>

    </details>

  </details>



</body>

</html>

Output: