1. Uvod

Element <details> služi za semantičko skrivanje/otkrivanje sadržaja, dok <summary> definira vidljivi naslov. Kada ga korisnik klikne, preglednik automatski proširuje ili zatvara sadržaj.

• Dostupnost: Čitači ekrana odmah razumiju strukturu.
• Semantika: Tražilice i alati za indeksiranje bolje interpretiraju odnos naslov → sadržaj.
• Ušteda prostora: Idealno za FAQ, fusnote i složenu dokumentaciju.

2. Osnovna sintaksa

<details>
  <summary>Klikni za više informacija</summary>
  <p>Skriveni sadržaj...</p>
</details>

Korištenje atributa open otvara detalje pri učitavanju:

<details open> … </details>

3. Pristupačnost

Da biste očuvali pristupačnost, neka tekst u <summary> bude kratak i deskriptivan, izbjegavajte interaktivne elemente unutar njega i provjerite kontrast granica/teksta.

4. Stiliziranje <details> i <summary>

4.1 Uklanjanje zadanog markera

Preglednici dodaju mali trokutić (Disclosure Triangle). Sakrijte ga:

summary {
  list-style: none;     /* Firefox */
}
summary::-webkit-details-marker {
  display: none;        /* WebKit */
}

4.2 Vlastita ikona pseudo‑elementom

summary::before {
  content: '▶';
  font-size: 1.25rem;
  margin-right: .5rem;
  transition: transform .3s;
}
details[open] summary::before {
  transform: rotate(90deg); /* strelica okrenuta dolje */
}

4.3 Animiranje sadržaja

Sam <details> nema CSS tranziciju visine, ali možete postići efekt fade/slide koristeći max-height i skriveni overflow unutar wrappera ili koristiti Web Animations API.

4.4 Obrubi, sjene i pozadine

Vizualno odvojite sekciju tamnom prozirnom pozadinom i neon‑borderom; npr.:

details {
  border: 1px solid #00e5ff;
  background: rgba(255,255,255,.02);
  border-radius: 1rem;
  box-shadow: 0 0 18px rgba(0,229,255,.15);
}

4.5 Hover & focus stanje

details:hover,
details:focus-within {
  border-color: #ff66a6;
}

5. Napredna uporaba i savjeti

• Ugniježđeni detalji: Možemo stvoriti multi‑level izbornik.
• Spoiler tag: Odlično za sakrivanje rješenja zadataka.

6. Primjeri

7. Izvori

• MDN — <details>
• MDN — <summary>
• WHATWG Living Standard — details