HTML <details> Tag

The HTML <details> tag is used to create a collapsible section that allows users to show or hide content. It provides an interactive element that is useful for adding additional information or details that are not immediately visible.

The <details> tag is often used with the <summary> tag, which acts as a visible label or title for the collapsible content. By default, the content inside the <details> tag is hidden until the user clicks on the summary to reveal it.

Basic Syntax of HTML <details> Tag

The basic structure of the <details> tag is:

</>
Copy
<details>
    <summary>Summary Text</summary>
    Collapsible content goes here.
</details>

When the user clicks on the <summary> text, the content inside the <details> tag becomes visible.

Attributes of HTML <details> Tag

  • open: This boolean attribute specifies that the details are visible (open) by default. If not present, the details are collapsed by default.
  • Global Attributes: The <details> tag supports all global attributes, such as id, class, and style.
  • Event Attributes: The <details> tag supports event attributes such as onclick and onfocus.

Basic Example of HTML <details> Tag

Here’s a simple example demonstrating the use of the <details> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <details>
            <summary>What is HTML?</summary>
            HTML (HyperText Markup Language) is the standard language for creating web pages.
        </details>
    </body>
</html>

Explanation: In this example, the content inside the <details> tag is hidden by default. Clicking on “What is HTML?” reveals the hidden content.

Using the open Attribute in <details> tag

The open attribute makes the <details> tag expanded by default:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Open Attribute Example</h2>
        <details open>
            <summary>Advantages of HTML</summary>
            HTML is easy to learn, widely supported, and essential for web development.
        </details>
    </body>
</html>
Using the open Attribute in <details> tag

Explanation: The open attribute causes the content inside the <details> tag to be visible when the page loads.

Styling the <details> and <summary> Tags

Both the <details> and <summary> tags can be styled using CSS for a customized look:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            details {
                margin: 10px 0;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                background-color: #f9f9f9;
            }

            summary {
                font-weight: bold;
                cursor: pointer;
                color: #007BFF;
            }

            summary:hover {
                color: #0056b3;
            }
        </style>
    </head>
    <body>
        <h2>Styled Details Tag Example</h2>
        <details>
            <summary>Click to learn more</summary>
            This is a styled collapsible section using CSS.
        </details>
    </body>
</html>
Styling the <details> and <summary> Tags

Result: The <details> tag is styled with padding, a border, and a light background. The <summary> tag is styled with bold text and a hover effect for better interactivity.

Practical Applications of the <details> Tag

  • FAQs: Use the <details> tag to organize frequently asked questions, with answers hidden by default.
  • Collapsible Instructions: Provide collapsible sections for setup instructions, troubleshooting, or additional details.
  • Documentation: Use the <details> tag in technical documents to group related information that can be expanded or collapsed.

Advanced Example: Nested <details> Tags

You can nest multiple <details> tags for hierarchical content:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Nested Details Example</h2>
        <details>
            <summary>Programming Languages</summary>
            <p>Here are some popular programming languages:</p>
            <details>
                <summary>JavaScript</summary>
                JavaScript is used for web development and building interactive web pages.
            </details>
            <details>
                <summary>Python</summary>
                Python is known for its simplicity and is used in AI, data science, and web development.
            </details>
        </details>
    </body>
</html>

Explanation: The outer <details> tag provides a high-level category, and the nested tags offer more detailed information about each item.