Tilbage til Details og accordion

1. semester / Tema 4: Grundlæggende UI

Fra details til accordion

Grupér flere `details`-elementer, så de opfører sig mere som en accordion.

Se undervisningsslides

Relevante links

TL;DR

  1. open gør en details åben fra start.
  2. name kan gruppere flere details, så kun én er åben ad gangen.
  3. Det giver en mere accordion-lignende adfærd.
  4. HTML’en bliver stadig enkel og læsbar.

Hvis du kun husker én ting: En accordion er stadig bare flere gode details-sektioner, der arbejder sammen.

open styrer starttilstanden

Hvis en sektion skal være åben fra start, kan du bruge attributten open:

<details open>
  ...
</details>

Det er et lille greb, men det gør det tydeligt, at state også kan styres direkte i HTML.

Gruppér flere sektioner med name

Hvis du vil have flere details-elementer til at hænge sammen, kan du give dem samme name:

<details name="my-detail">
  ...
</details>


<details name="my-detail">
  ...
</details>

Så kan de opføre sig mere som en klassisk accordion, hvor kun én sektion er åben ad gangen.

Det vigtige princip

Det smarte her er, at du stadig bruger almindelig HTML. Du bygger altså videre på en semantisk struktur i stedet for at skifte til en helt anden model.

Det gør løsningen lettere at læse og lettere at bygge videre på med CSS.