Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify that the details should be visible to the user in HTML?
The task we are going to perform in this article is how to specify that the details should be visible to the user in HTML.
The user can open and close more details by using the <details> tag, which specifies them. Create interactive widgets that the user can open and close by using the <details> tag. The widget's closed state by default. It expands when you open it, revealing the contents. The details tag is a container for any kind of content.
Syntax
Following is the syntax for <details> tag
<details> <summary> Text content </summary> <div> Content . . . </div> </details>
Let’s dive into the following examples to understand more about how to specify that the details should be visible to the user in HTML.
Example 1
In the following example we are using details element to create an interactive widget.
<!DOCTYPE html>
<html>
<head>
<style>
summary {
font-size:40px;
color:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<details>
<summary>TUTORIALSPOINT</summary>
<p>A computer science portal for eveyone</p>
<div>It is a computer science portal where you
can learn programming.</div>
</details>
</body>
</html>
On executing the above script, it will generate an output consisting of an interactive widget which allows the user to open or hide the text.
By clicking on the interactive widget, the text inside it will be shown to the user and you can close it when it is needed.
Example 2
Considering the following example where we are using CSS to style <details> and <summary>.
<!DOCTYPE html>
<html>
<head>
<style>
summary {
padding: 4px;
width: 200px;
background-color: #A3E4D7 ;
border: none;
box-shadow: 1px 1px 2px #A569BD ;
cursor: pointer;
}
p {
background-color: #85929E ;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px#A569BD;
}
</style>
</head>
<body>
<details>
<summary>MS DHONI</summary>
<p>Mahendra Singh Dhoni is an Indian former international cricketer
who was captain of the Indian national cricket team in limited-overs
formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p>
</details>
</body>
</html>
When the script gets executed, it will generate an output displaying the <detail> tag content used in the script applied with CSS. If the user clicks on the detail box, the matter mentioned in the
tag on the webpage, as well as the CSS applied, will be displayed.
159 Views
