<details>
<summary>Kako deluje <details> in <summary>?</summary>
<p>Vsa vsebina tukaj je skrita.</p>
</details>
<details>
<p>Vsa vsebina tukaj je skrita.</p>
</details>
html, body {
font-family: sans-serif;
}
details {
border: 1px solid #aaa;
border-radius: 4px;
margin-bottom: 1em;
padding: .5em .5em 0;
}
summary {
background: #f3f3f3;
font-weight: bold;
margin: -.5em -.5em 0;
padding: .5em;
}
details[open] {
padding: .5em;
}
details[open] p {
margin-left: 1em;
}
details[open] summary {
border-bottom: 1px solid #ccc;
margin-bottom: .5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.