Атрибут open тега <details> — розгорнути блок одразу

<h3>Приклад використання атрибуту <code>open</code></h3>
<details open>
   <summary>Тег details</summary>
   <p>вказує додаткові відомості які користувач може за вимогою приховати або переглянути.

Початковий вміст елемента details приховано, замість нього виводиться текст «Детальніше», клацнувши на який ви приховаєте або відобразете вміст елемента.</p>
  </details>

HTML

<details>
    <summary>Атрибута немає — згорнуто</summary>
    <p>Вміст видно лише після клацання.</p>
</details>

<details open>
    <summary>open — розгорнуто</summary>
    <p>Клацніть по підпису: браузер сам прибере атрибут.</p>
</details>

<details open="false" class="trap">
    <summary>open="false" — теж розгорнуто</summary>
    <p>Значення не має значення: важлива сама присутність атрибута.</p>
</details>

<details class="trap">
    <p>А тут немає summary — і підпис вище браузер придумав сам.</p>
</details>

<p class="head">Акордеон на спільному name</p>

<details name="akordeon" open>
    <summary>Перший пункт</summary>
    <p>Відкрийте другий — цей закриється сам.</p>
</details>

<details name="akordeon">
    <summary>Другий пункт</summary>
    <p>А тепер сам закрився перший.</p>
</details>

CSS

details {
    max-width: 560px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

summary {
    font-weight: 600;
    cursor: pointer;
}

details p {
    margin: 8px 0 0;
}

details[open] {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

details[open] > summary::after {
    font-family: ui-monospace, monospace;
    font-size: .8em;
    font-weight: 400;
    color: #3a9a4f;
    content: "  ← зараз у цього блока є атрибут open";
}

.trap {
    border-color: #d64545;
    background: #fff8f8;
}

.head {
    margin: 22px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}