<details name> (acordeon exclusiv) în HTML

<details name="faq">...</details>
<details name="faq">...</details>

Ce face <details name> (acordeon exclusiv)

Atributul name de pe <details> grupează mai multe panouri. Când deschizi un panou, browserul îl închide automat pe cel deschis anterior din același grup. Rezultatul este un acordeon exclusiv, fără JavaScript.

Elementele din grup nu trebuie să fie vecine, dar trebuie să fie în același document. Dacă în HTML mai multe panouri din grup au atributul open, browserul îl lasă deschis doar pe primul.

Funcția este Baseline din decembrie 2024 (Chrome 120, Firefox 130, Safari 17.2). În browserele vechi, panourile se deschid independent, deci conținutul rămâne accesibil.

Atribute

Atribut	Descriere
name	Numele grupului. Toate <details> cu același nume se exclud reciproc.
open	Panoul pornește deschis. Într-un grup, doar unul ar trebui să aibă open.

Exemple

Exemplul 1: Întrebări frecvente, câte una deschisă

La deschiderea celei de-a doua întrebări, prima se închide singură.

<details name="faq" open>
  <summary>Cât costă livrarea?</summary>
  <p>Livrarea este gratuită pentru comenzi de peste 200 lei.</p>
</details>
<details name="faq">
  <summary>Livrați și în afara Iașului?</summary>
  <p>Da, prin curier, în 1-2 zile lucrătoare.</p>
</details>
<details name="faq">
  <summary>Pot returna un produs?</summary>
  <p>Da, în 14 zile de la primire.</p>
</details>

Ce afișează browserul

▼ Cât costă livrarea? (deschis)
▶ Livrați și în afara Iașului?
▶ Pot returna un produs?
Clic pe a doua întrebare: aceasta se deschide, prima se închide.

Exemplul 2: Două grupuri independente pe aceeași pagină

Numele diferite formează acordeoane separate: în fiecare poate fi deschis câte un panou.

<h2>Livrare</h2>
<details name="livrare"><summary>Curier</summary><p>25 lei.</p></details>
<details name="livrare"><summary>Ridicare personală</summary><p>Gratuit, din Iași.</p></details>

<h2>Plată</h2>
<details name="plata"><summary>Card</summary><p>Visa sau Mastercard.</p></details>
<details name="plata"><summary>Ramburs</summary><p>Plătești curierului.</p></details>

Ce afișează browserul

Poți avea deschise în același timp „Curier” și „Card”, dar nu „Curier” și „Ridicare personală”.

Greșeli frecvente

• Cod JavaScript care închide celelalte panouri, păstrat și după adăugarea lui name: cele două mecanisme se încurcă.
• Acordeon exclusiv pentru conținut pe care utilizatorul vrea să-l compare (de exemplu două tarife): închiderea automată îl obligă să deschidă panourile pe rând.
• Același name pus din greșeală pe două liste diferite: deschiderea unui panou dintr-o listă îl închide pe cel din cealaltă.

Comenzi înrudite

• <details> și <summary>: Creează un element nativ de tip acordeon: conținutul este ascuns și se extinde doar când utilizatorul apasă pe summary.
• <dialog>: Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.
• <section>: Marchează o secțiune tematică a unei pagini sau a unui articol, care ar trebui să aibă propriul titlu (h2-h6).