HTML Free Codes<details> ✨ HTML5
Defines additional details that the user can view or hide
Definition and Usage
The <details> element specifies additional details that the user can open and close on demand. It creates a disclosure widget where information is visible only when toggled into an "open" state.
The <details> tag must contain a <summary> tag as its first child (optional, but recommended). The <summary> element establishes a visible heading for the details.
<details> element is perfect for creating FAQs, accordion menus, and collapsible sections without JavaScript.
open attribute to make the details visible by default.
Browser Support
The <details> tag is an HTML5 element with the following browser support:
Attributes
The <details> tag also supports the Global Attributes in HTML.
The <details> tag has the following specific attribute:
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) by default |
Examples
Basic Details Element
Create a simple disclosure widget:
Example
<details>
<summary>Click to reveal more information</summary>
<p>This is the hidden content that appears when you click the summary.</p>
</details>With Summary Tag
Use a descriptive summary heading:
Example
<details>
<summary>System Requirements</summary>
<ul>
<li>Operating System: Windows 10 or later</li>
<li>RAM: 8 GB minimum</li>
<li>Storage: 500 MB available space</li>
</ul>
</details>Open by Default
Display details in an expanded state:
Example
<details open>
<summary>Important Notice</summary>
<p>This section is expanded by default. Users can still close it.</p>
</details>Nested Details
Create hierarchical disclosure widgets:
Example
<details>
<summary>Chapter 1: Introduction</summary>
<p>This chapter covers the basics.</p>
<details>
<summary>Section 1.1: Getting Started</summary>
<p>Learn how to set up your environment.</p>
</details>
<details>
<summary>Section 1.2: Basic Concepts</summary>
<p>Understand the fundamental principles.</p>
</details>
</details>FAQ Section
Build a frequently asked questions section:
Example
<h2>Frequently Asked Questions</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language. It's the standard markup language for creating web pages.</p>
</details>
<details>
<summary>How do I learn HTML?</summary>
<p>Start with basic tags, practice with examples, and build simple websites. Use online tutorials and interactive platforms.</p>
</details>
<details>
<summary>Is HTML hard to learn?</summary>
<p>No, HTML is one of the easiest programming languages to learn. It has a simple structure and logical syntax.</p>
</details>Accordion Menu
Create an accordion-style menu:
Example
<div class="accordion">
<details>
<summary>Products</summary>
<ul>
<li><a href="#">Laptops</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablets</a></li>
</ul>
</details>
<details>
<summary>Services</summary>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</details>
</div>Styled with CSS
Customize the appearance of details elements:
Example
<style>
details {
border: 2px solid #10b981;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
background: #f0fdf4;
}
summary {
font-weight: 600;
cursor: pointer;
user-select: none;
color: #059669;
}
summary:hover {
color: #047857;
}
details[open] summary {
margin-bottom: 12px;
border-bottom: 2px solid #10b981;
padding-bottom: 8px;
}
</style>
<details>
<summary>Styled Details</summary>
<p>This details element has custom styling applied.</p>
</details>JavaScript Control
Control details elements programmatically with JavaScript:
Example
<details id="myDetails">
<summary>JavaScript Controlled Details</summary>
<p>This can be opened and closed with JavaScript.</p>
</details>
<button onclick="openDetails()">Open</button>
<button onclick="closeDetails()">Close</button>
<button onclick="toggleDetails()">Toggle</button>
<script>
const details = document.getElementById('myDetails');
function openDetails() {
details.open = true;
}
function closeDetails() {
details.open = false;
}
function toggleDetails() {
details.open = !details.open;
}
// Listen for toggle event
details.addEventListener('toggle', function() {
console.log('Details state:', details.open ? 'open' : 'closed');
});
</script>Accessibility Features
- Keyboard Accessible: The
<details>element is fully keyboard accessible by default - Screen Reader Support: Automatically announces the expanded/collapsed state
- ARIA Attributes: No additional ARIA attributes needed - semantics are built-in
- Focus Management: Summary element receives focus and can be activated with Enter or Space
- Native Widget: Better accessibility than custom JavaScript implementations
<details> vs <dialog>
Comparison between disclosure widgets and modal dialogs:
| Feature | <details> | <dialog> |
|---|---|---|
| Purpose | Toggle additional content visibility | Display modal or non-modal dialogs |
| Layout | In-line with content flow | Overlays page content |
| Interaction | Click to expand/collapse | Open/close programmatically |
| Use Case | FAQs, accordions, collapsible sections | Alerts, confirmations, forms |
| JavaScript Required | No (optional for enhanced features) | Yes (to open and close) |
Try it Yourself
Interactive Example
Click on the summaries below to expand/collapse the details:
What is the <details> tag?
The <details> tag creates a disclosure widget for hiding and showing content.
Why use <details>?
It provides native collapsible functionality without JavaScript and is fully accessible.
This one is open by default
Use the 'open' attribute to display details expanded by default.
Best Practices
- Always include a
<summary>element as the first child for better usability - Use descriptive summary text that clearly indicates what content will be revealed
- Don't nest too many levels deep - it can confuse users
- Consider using the
openattribute for important information - Style the summary to look clickable (cursor pointer, hover effects)
- Test keyboard navigation and screen reader compatibility
- Use for progressive disclosure - show details only when needed
- Avoid hiding critical information that users need to see immediately