<details>
  <summary>Kako deluje &lt;details&gt; in &lt;summary&gt;?</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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.