Tilbage til Details og accordion

1. semester / Tema 4: Grundlæggende UI

details og summary

Brug de indbyggede HTML-elementer `details` og `summary` til åbn/luk-indhold.

Se undervisningsslides

Relevante links

TL;DR

  1. details laver en indbygget åbn/luk-sektion.
  2. summary er den titel, man klikker på.
  3. Det er et godt alternativ til hjemmelavede løsninger med mange div’er.
  4. Start med HTML-strukturen, før du tænker styling.

Hvis du kun husker én ting: Brug details og summary, når du vil have åbn/luk-adfærd med rigtig HTML fra start.

En indbygget åbn/luk-komponent

details og summary er nyttige, fordi HTML allerede kender deres rolle:

Et grundeksempel ser sådan ud:

<details>
  <summary>Titel</summary>


  <div>
    <p>Indholdet vises kun, når <details> er åben.</p>
  </div>
</details>

Hvorfor det er en god begyndermodel

Den store fordel er, at strukturen siger noget i sig selv. Du behøver ikke først opfinde en åbn/luk-løsning med JavaScript for at komme i gang.

Det gør details oplagt som første møde med accordions og skjult indhold.

Øvelse

Her arbejder du med den grundlæggende struktur og ser forskellen på en lukket og en åben details-sektion.