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.

T

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

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: