|
|
The The Any sort of content can be put inside the Tip: The <summary> tag is used in conjunction with |
How to create HTML <details> Tag
Specify details that the user can open and close on demand
index.html
Example:
HTML
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Output should be:
What Type of Browsers will Support for HTML <details> Tag
Attributes for HTML <details> Tag
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
How to set Default CSS Settings for HTML <details> Tag
The details and summary elements + CSS.
index.html
Example:
HTML
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Output should be:
How to set Default CSS Settings for HTML <details> Tag
Most browsers will display the <details> element with the following default values.
index.html
Example:
HTML
<style>
details {
display: block;
}
</style>
Output should be:
How to add HTML <details> open Attribute
Definition and Usage
The open attribute is a boolean attribute.
When present, it specifies that the details should be visible (open) to the user.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<details open>
index.html
Example:
HTML
<details open>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Output should be:
Reffered: https://www.w3schools.com/tags/tag_details.asp
| How to create HTML <details> Tag | HTML Tag |
| What Type of Browsers will Support for HTML <details> Tag | HTML Tag |
| Attributes for HTML <details> Tag | HTML Tag |
| How to set Default CSS Settings for HTML <details> Tag | HTML Tag |
| How to set Default CSS Settings for HTML <details> Tag | HTML Tag |
| How to add HTML <details> open Attribute | HTML Tag |
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 10 months ago |
Uploaded by: | Admin |
Views: | 501 |