It is used on a <details> element, so your example with the <div> is not correct.
HTML5 Spec says:
The
opencontent attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown.When the element is created, if the attribute is absent, the additional information should be hidden; if the attribute is present, that information should be shown. Subsequently, if the attribute is removed, then the information should be hidden; if the attribute is added, the information should be shown.
- Browser support for
<details> - And a little demo for fun
W3Schools
w3schools.com › tags › att_open.asp
HTML open Attribute
The open attribute is a boolean attribute.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › HTMLDetailsElement › open
HTMLDetailsElement: open property - Web APIs | MDN
The open property of the HTMLDetailsElement interface is a boolean value reflecting the open HTML attribute, indicating whether the <details>'s contents (not counting the <summary>) is to be shown to the user.
Videos
04:24
Portfolio HTML target attribute TRICK - YouTube
14:58
Control Links With the HTML Target Attribute - YouTube
03:23
What are Attributes in HTML - YouTube
HTML attribute: rel -opener, noopener | API: open, opener
05:24
How to Make HTML Links Open in a New Tab - YouTube
Tutorialspoint
tutorialspoint.com › html › html_open_attribute.htm
HTML - open Attribute
HTML open is used to specifies whether the details of the contents of <details> element, are currently visible. This attribute is a Boolean attribute with two values: "true" and "false." It is true if the open attribute exists within the element but has no value.
W3Schools
w3schools.com › tags › att_details_open.asp
HTML details open Attribute
When present, it specifies that the details should be visible (open) to the user. The numbers in the table specify the first browser version that fully supports the attribute. ... If you want to use W3Schools services as an educational institution, ...
GeeksforGeeks
geeksforgeeks.org › html › html-open-attribute
HTML open Attribute - GeeksforGeeks
July 11, 2025 - The open attribute in HTML is used to indicate whether the details will be shown on page load. This is a boolean attribute.
DotFactory
dofactory.com › html › details › open
HTML <details> open Attribute
The open attribute specifies that the content of the <details> element is visible on page load.
W3Schools
w3schools.com › jsref › prop_details_open.asp
HTML DOM Details open Property
This property reflects the HTML open attribute.
GeeksforGeeks
geeksforgeeks.org › html › html-details-open-attribute
HTML | <details> open Attribute - GeeksforGeeks
July 21, 2022 - The HTML <details> open attribute is used to indicate whether the details will be display on page load. It is a boolean attribute.
The Webmaster
thewebmaster.com › html › attributes › open
HTML open Attribute
The open Attribute is a boolean attribute, which if present, indicates that both the summary and detail information should be shown to the user.
CodeToFun
codetofun.com › html › attribute-open
HTML open Attribute | CodeToFun
November 19, 2024 - The open attribute in HTML is used in conjunction with the <details> and <summary> elements to control the initial visibility of the content within a disclosure widget.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › HTML › Reference › Elements › details
<details>: The Details disclosure element - HTML | MDN
If multiple grouped <details> elements are given the open attribute, only the first one in the source order will be rendered open. Note: <details> elements don't have to be adjacent to one another in the source to be part of the same group. In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.
GitHub
github.com › w3c › html › issues › 600
<details> "open" attribute · Issue #600 · w3c/html
September 27, 2016 - The spec says, and it's a behaviour commonly honored by UAs supporting the details element, that the open boolean attribute is to be set or removed when users click on the summary element.
Author AndySky21
Creative Commons
creativecommons.org › home › open attribute, a simple way to attribute cc-licensed works on the web
Open Attribute, a simple way to attribute CC-licensed works on the web - Creative Commons
September 27, 2023 - The add-ons “query the metadata around a CC-licensed object and produce a properly formatted attribution that users can copy and paste wherever they need to.” · If you use our license chooser and copy and paste the resulting HTML code into your website, then you’re pretty much good to go. Anyone who uses the Open Attribute browser add-on to query your site will automatically receive a formatted HTML or plain text attribution that they can copy and paste to give you the proper credit.
HTML.com
html.com › attributes › a-target
How To Use The <a> To Make Links & Open Them Where You Want! »
January 11, 2019 - If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise. The target attribute specifies where the linked document will open when the link is clicked.
W3Schools
w3schools.com › tags › att_a_target.asp
HTML a target Attribute
The target attribute specifies where to open the linked document. ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an error, or if you want to make a suggestion, send us an e-mail: help@w3schools.com · HTML ...
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › HTMLDialogElement › open
HTMLDialogElement: open property - Web APIs | MDN
The open property of the HTMLDialogElement interface is a boolean value reflecting the open HTML attribute, indicating whether the <dialog> is available for interaction.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › HTML › Attributes
HTML attribute reference - HTML | MDN
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
Top answer 1 of 7
98
You can add the open attribute into the details tag like this:
<details open>
<summary>Table of Contents</summary>
<ul>
<li><a href="#" class="active">Introduction</a></li>
<li><a href="/2/">Body</a></li>
<li><a href="/3/">Conclusion</a></li>
</ul>
</details>The details will then be expanded by default.
2 of 7
4
If you want a JS solution, you could give the details element an ID:
<details id="target-me">
<summary>Table of Contents</summary>
<ul>
<li><a href="#" class="active">Introduction</a></li>
<li><a href="/2/">Body</a></li>
<li><a href="/3/">Conclusion</a></li>
</ul>
</details>
And then use the following JS:
document.getElementById("target-me").open = true;
W3Schools
w3schools.com › html › html_attributes.asp
HTML Attributes
The value of the title attribute will be displayed as a tooltip when you mouse over the element: <p title="I'm a tooltip">This is a paragraph.</p> Try it Yourself » · The HTML standard does not require lowercase attribute names.