How to set a details element to OPEN by default or via CSS

Question

HTML5 adds two new elements that are useful for marking up a table of contents for an article: details and summary.

The details element defaults to closed (hides everything except the summary element) and when clicked, it expands to reveal its contents. When it does this, it adds an "open" attribute to the details element.

I would like the element to default to open without having to add the open attribute to the markup. Is it possible to do this via CSS or would scripting have to come into play?

Example:

<details>
<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>

never tried this, but maybe `details[open] { display: block; }`? — Marc B, Jan 11 '13 at 20:53
@ToanNguyen in some cases (media queries) it may be useful to have the contents displayed by default. If a screen is flipped from horizontal to vertical, for example, you might want to force the contents open. — robrecord, Jul 15 '20 at 10:29

score 69 · Answer 1 · edited Apr 24 '22 at 03:15

69

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.

edited Apr 24 '22 at 03:15

Jay Sullivan

17,332
11
62
86

answered Nov 27 '14 at 10:27

Ariona Rian

9,153
3
24
36

7

The OP asked for a CSS or JS solution without requiring the HTML attribute. – robrecord Jul 15 '20 at 10:27
12

@robrecord There is no solution using CSS because CSS is only for styling not for changing state of markup. So the solution i am proposing is by adding open attribute. OP asking IF POSSIBLE, and if you read the title OPEN by default. – Ariona Rian Sep 24 '20 at 23:20
What about scripting with JS? – robrecord Sep 28 '20 at 09:13
@robrecord See my answer for a JS solution. – kosher Sep 22 '21 at 18:07
Th OP even mentions the "open" attribute – run_the_race Nov 26 '21 at 09:50

score 3 · Answer 2 · answered Sep 22 '21 at 18:06

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;

score 2 · Answer 3 · answered Oct 10 '21 at 20:38

2

If you want to do it in JavaScript

const details = document.querySelector("details");
details.setAttribute("open", "");

Related to html5 details tag open one by one javascript function working strange

answered Oct 10 '21 at 20:38

aloisdg

22,270
6
85
105

score 0 · Answer 4 · answered Dec 05 '20 at 08:22

You can also use the alternative below it still has the ability to open and close but initially, it's opened and you can test that (I provided the output from my computer):

<div>
    <h3>Open</h3>
    <details open>
        <summary>Always open</summary>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </details>
</div>

check the photo of the output below:

How to set a details element to OPEN by default or via CSS

4 Answers4

Linked