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> 

Answer 1

You can add open attribute into 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 attribute will be expanded by default

Answer 2

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;