Ce face <details> și <summary>
Tagurile <details> și <summary> permit realizarea unui acordeon interactiv complet fără a scrie nicio linie de cod JavaScript.
Tagul <summary> este primul copil și devine titlul clicabil, însoțit de o mică săgeată triunghiulară nativă. La clic, săgeata se rotește și conținutul de dedesubt devine vizibil. Dacă adaugi atributul open pe <details>, acordeonul va fi deschis din start.
Atribute
| Atribut | Descriere |
|---|---|
open |
Atribut boolean care afișează conținutul deschis în mod implicit. |
name |
Grupare HTML5 modernă (stil acordion exclusiv: deschiderea unuia le închide pe celelalte din același grup). |
Exemple
Exemplul 1: Secțiune de întrebare și răspuns (FAQ) fără JavaScript
Apasă pe textul întrebării pentru a vedea răspunsul complet.
<details>
<summary><strong>Cum primesc certificatul de absolvire?</strong></summary>
<p>După parcurgerea tuturor lecțiilor și rezolvarea testului final, certificatul este generat automat în contul tău.</p>
</details>Ce afișează browserul
▶ Cum primesc certificatul de absolvire? (la clic se deschide răspunsul și săgeata devine ▼)Greșeli frecvente
- Omiterea tagului
; dacă lipsește summary, browserul va genera un titlu implicit în limba engleză („Details”). - Scrierea de scripturi complexe de toggle cu JavaScript pentru un simplu acordeon, când HTML5 oferă acest mecanism nativ și accesibil din tastatură.
Comenzi înrudite
<dialog>: Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.<button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.<section>: Marchează o secțiune tematică a unei pagini sau a unui articol, care ar trebui să aibă propriul titlu (h2-h6).