Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify that the details should be visible to the user in HTML?
The <details> element in HTML creates interactive widgets that users can open and close to reveal additional content. By default, the details are hidden and only the summary text is visible. You can control whether the details should be initially visible using the open attribute.
Syntax
Following is the syntax for the <details> element −
<details> <summary>Summary text</summary> Content to be revealed... </details>
To make the details visible by default, use the open attribute −
<details open> <summary>Summary text</summary> Content that is initially visible... </details>
Making Details Visible by Default
The open attribute is a boolean attribute that specifies whether the details should be visible to the user when the page loads. When present, it overrides the default closed state of the details element.
Example − Details Visible on Page Load
Following example demonstrates how to make details visible by default using the open attribute −
<!DOCTYPE html>
<html>
<head>
<title>Details Open by Default</title>
<style>
summary {
font-size: 20px;
color: #2c3e50;
font-weight: bold;
cursor: pointer;
padding: 10px;
background-color: #ecf0f1;
border-radius: 5px;
}
details[open] summary {
margin-bottom: 10px;
}
details div {
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<details open>
<summary>TutorialsPoint</summary>
<div>
<p>A comprehensive learning platform for everyone</p>
<p>TutorialsPoint is a leading online tutorial library where you can learn programming, web development, databases, and much more.</p>
</div>
</details>
</body>
</html>
The output shows the details expanded by default, displaying all the content immediately −
TutorialsPoint ?
A comprehensive learning platform for everyone
TutorialsPoint is a leading online tutorial library where you can learn
programming, web development, databases, and much more.
Comparing Open vs Closed Details
Following example demonstrates the difference between details with and without the open attribute −
<!DOCTYPE html>
<html>
<head>
<title>Open vs Closed Details</title>
<style>
details {
margin: 20px 0;
padding: 10px;
border: 2px solid #3498db;
border-radius: 8px;
}
summary {
font-weight: bold;
font-size: 18px;
color: #2980b9;
cursor: pointer;
padding: 5px;
}
.content {
margin-top: 10px;
padding: 15px;
background-color: #ebf3fd;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Closed by Default</h2>
<details>
<summary>HTML Basics</summary>
<div class="content">
HTML (HyperText Markup Language) is the standard markup language for creating web pages. Click to reveal more details!
</div>
</details>
<h2>Open by Default</h2>
<details open>
<summary>CSS Styling</summary>
<div class="content">
CSS (Cascading Style Sheets) is used to style and layout web pages. This content is visible immediately when the page loads.
</div>
</details>
</body>
</html>
The first details element is closed by default (user must click to expand), while the second is open by default and shows its content immediately −
Closed by Default
HTML Basics ? (collapsed, click to expand)
Open by Default
CSS Styling ? (expanded by default)
CSS (Cascading Style Sheets) is used to style and layout web pages.
This content is visible immediately when the page loads.
JavaScript Control of Details Visibility
You can also control the visibility of details programmatically using JavaScript by setting the open property.
Example − Toggle Details with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Details Control</title>
<style>
details {
margin: 20px 0;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
summary { font-weight: bold; color: #333; }
button {
padding: 10px 15px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<details id="myDetails">
<summary>Programming Languages</summary>
<p>Popular programming languages include JavaScript, Python, Java, C++, and many others. Each has its own strengths and use cases.</p>
</details>
<button onclick="showDetails()">Show Details</button>
<button onclick="hideDetails()">Hide Details</button>
<button onclick="toggleDetails()">Toggle Details</button>
<script>
function showDetails() {
document.getElementById("myDetails").open = true;
}
function hideDetails() {
document.getElementById("myDetails").open = false;
}
function toggleDetails() {
var details = document.getElementById("myDetails");
details.open = !details.open;
}
</script>
</body>
</html>
The buttons allow programmatic control of the details visibility. The JavaScript functions set the open property to show, hide, or toggle the details content.
Programming Languages ? (expandable summary) [Show Details] [Hide Details] [Toggle Details]
Multiple Details Elements
You can have multiple details elements on the same page, with different visibility states. Following example shows a FAQ-style layout −
<!DOCTYPE html>
<html>
<head>
<title>FAQ with Details</title>
<style>
details {
margin: 15px 0;
padding: 10px;
border-left: 4px solid #007bff;
background-color: #f8f9fa;
border-radius: 0 5px 5px 0;
}
summary {
font-weight: bold;
cursor: pointer;
padding: 5px 0;
color: #007bff;
}
details[open] summary {
border-bottom: 1px solid #dee2e6;
margin-bottom: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frequently Asked Questions</h2>
<details open>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications.</p>
</details>
<details>
<summary>What is CSS?</summary>
<p>CSS (Cascading Style Sheets) is used to describe the presentation of a document written in HTML, including colors, layout, and fonts.</p>
</details>
<details>
<summary>What is JavaScript?</summary>
<p>JavaScript is a programming language that enables interactive web pages and dynamic content on websites.</p>
</details>
</body>
</html>
In this FAQ layout, only the first question is open by default while others remain collapsed until clicked.
Conclusion
To specify that details should be visible to the user in HTML, add the open attribute to the <details> element. This boolean attribute overrides the default closed state, making the content immediately visible when the page loads. You can also control visibility programmatically using JavaScript by setting the open property.
316 Views
