The HTML open attribute is a Boolean attribute used to specify whether the content of a <details> or <dialog> element is visible or active.
Definition and Usage
➔ The open attribute is most often used with the <details> element, when present additional content is displayed to the user, when absent the element is collapsed (closed), only the <summary> content is visible.
➔ The value of the open attribute can be toggled by the user by clicking on the summary or programmatically./p>
➔ Although the open attribute can be set for <dialog> , it is recommended to use the show(), showModal(), and close() methods to handle it.
➔ <details open> and <details open="true"> are equivalent but the former is preferable, omitting the attribute entirely specifies open="false".
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML open attribute Example</title>
</head>
<body>
<h3>HTML open attribute Example</h3>
<p>the open attribute can be toggled by the user by clicking on the summary</p>
<!-- The content is open by default -->
<details open>
<summary>Product details is given bellow</summary>
<p>This is the details</p>
</details>
<!-- The content is hidden by default -->
<details>
<summary>Show me details</summary>
<p>1. Product 1.</p>
<p>2. Product 2.</p>
</details>
</body>
</html>