How to specify that the details should be visible to the user in HTML?

HTML Web Development Front End Technology

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.