Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <details> tag in HTML is used to create a collapsible section that users can expand or collapse to view additional content. It provides a simple way to hide details by default, making web pages more organized and user-friendly. This tag is often used for FAQs, additional descriptions, or expandable sections in articles and documentation. The <details> tag works with the <summary> tag, which defines the visible heading of the collapsible section. When clicked, it expands or collapses the content without requiring JavaScript.
In this article, we will discuss the <details> tag, its syntax, attributes, events, and how to use it with the open attribute to improve your web applications.
Syntax of the <details> Tag
The <details> tag is a semantic HTML5 element used to create interactive disclosure widgets. It works with a combination of other tags, such as <summary>, which acts as the clickable heading to toggle visibility.
Here is the basic syntax:
<details>
<summary>Title of the collapsible section</summary>
Content that will be hidden or shown when the user clicks on the summary.
</details>
What is a Details Tag?
The details tag is an HTML element that creates a disclosure widget. This means it can show or hide additional content when a user clicks on it. It's like a little button that reveals more information when you click it. The tag itself is very simple to use and doesn't need any special libraries or scripts.
For example:
<!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>
</head>
<body>
<details>
<summary>Click me to see more information</summary>
<p>This is the hidden content that appears when you click the summary.</p>
</details>
</body>
</html>
Output
In this example, the <details> tag wraps around the content you want to show or hide. The <summary> tag is used to create the clickable part that users will see. When you click on the summary, the hidden content inside the <details> tag will be revealed.
Example: Basic <details> Tag
<!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>
</head>
<body>
<h1>Example of the HTML <details> Tag</h1>
<details>
<summary>Click to see more information</summary>
<p>This is additional information that is hidden by default.</p>
</details>
</body>
</html>
Output:
Initially, only the text "Click to see more information" is visible.
Clicking on it reveals the hidden paragraph: "This is additional information that is hidden by default."
Attributes of the <details> Tag
Attributes in HTML provide extra functionalities or behaviors to elements. The <details> tag has two main attributes:
1. open
This boolean attribute specifies whether the details should be open or closed by default. If present, the section will be expanded when the page loads.
Example:
<details open>
<summary>Open by default</summary>
<p>This content is already expanded when the page loads.</p>
</details>
Output: The content is visible without any user interaction because the open attribute is set.
2. Global Attributes
The <details> tag also supports all global attributes, like id, class, style, etc., for styling and identification.
Example with Global Attributes:
<details id="info" class="details-class" style="color: blue;">
<summary>Styled Details</summary>
<p>This section is styled with global attributes like class and style.</p>
</details>
Explanation:
The id="info" is a unique identifier.
The class="details-class" allows adding specific CSS rules.
The style="color: blue;" makes the text blue.
Events Associated with the <details> Tag
HTML events make it possible to trigger specific actions when users interact with elements. The <details> tag supports events like onToggle, which executes JavaScript code when the open/close state changes.
Example: Using onToggle Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Events</title>
<script>
function toggleEvent() {
alert("The details tag has been toggled!");
}
</script>
</head>
<body>
<details onToggle="toggleEvent()">
<summary>Click me</summary>
<p>When you toggle this section, an alert will appear.</p>
</details>
</body>
</html>
Output:
Each time you expand or collapse the <details> section, a JavaScript alert box pops up with the message: "The details tag has been toggled!"
Using <details> Tag with the open Attribute
The open attribute adds flexibility to control the initial state of the <details> tag. This is useful when you want some sections to be pre-expanded for better user experience.
Example: Multiple <details> Tags with open
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Tag with Open Attribute</title>
</head>
<body>
<h2>Frequently Asked Questions</h2>
<details open>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language and is used to structure web pages.</p>
</details>
<details>
<summary>What is the <details> tag?</summary>
<p>The <details> tag creates a collapsible section in a web page.</p>
</details>
</body>
</html>
Output:
The first <details> tag is expanded by default because of the open attribute.
The second <details> tag remains collapsed until clicked.
Why Do We Use the Details Tag?
We use the details tag to make webpages more interactive and user-friendly. It helps in organizing content by allowing users to expand or collapse sections. This is especially useful when you have a lot of information to display but want to keep the page clean and uncluttered. For example, you can use it to show additional details about a product, or to reveal answers to frequently asked questions.
In this example, the details tag is used to hide the product specifications. Users can click on the summary to reveal more information about the product. This keeps the page tidy and only shows the necessary details when needed.
Browser Support
The details tag is supported by most modern browsers, but it's important to know which ones support it and which don't. This helps you ensure that your website works well for all users.
Here’s a quick overview of browser support for the details tag:
Google Chrome: Supported
Mozilla Firefox: Supported
Microsoft Edge: Supported
Safari: Supported
Internet Explorer: Not supported
Frequently Asked Questions
What is the purpose of the <details> tag in HTML?
The <details> tag is used to create collapsible content sections, allowing users to hide or show additional information interactively.
How does the open attribute work in the <details> tag?
The open attribute ensures that the content inside the <details> tag is visible by default when the page loads.
Can JavaScript be used with the <details> tag?
Yes, the <details> tag supports events like onToggle, allowing JavaScript to execute actions when the section is expanded or collapsed.
Conclusion
In this article, we discussed the <details> tag, a simple yet important tag for creating interactive and collapsible sections in HTML. We looked at its syntax, attributes like open, events like onToggle, and practical examples of its usage. By understanding this tag, you can make your web pages more dynamic and user-friendly, enhancing user experience effectively.
518+ registered 
