Accordion

Interaktive elementer i HTML

Accordion

Afsløring af indhold

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details​

details / summary

<details> laver en åbn/luk-sektion, hvor ekstra indhold kun vises, når den er åben.


<summary> bruges til at angive den titel eller overskrift, der vises, når sektionen er lukket.

 

Browseren viser typisk en lille trekant ved siden af teksten, som roterer ved åbning.

details / summary

<details>
  <summary>Titel</summary>
  
  <div>
    <p>Indholdet vises kun, når &lt;details&gt; er åben.</p>
  </div>
</details>

-attributter

details

name

grupperer flere <details​>—elementer, så kun ét kan være åbent ad gangen.

open

angiver, om detaljerne er synlige

-attributter

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

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

øvelse

Lav en accordion

Brug <details> i stedet for <div> og <summary> i stedet for <p>.
Tilføj name-attributten, så kun én sektion kan være åben ad gangen.

<details>

<summary>

name

Lad den forblive åben

Selectors

::details-content

repræsenterer det område i <details>, som kan foldes ud eller skjules.

summary::marker

trekanten foran <summary>. Kan ændres eller fjernes via content.

details[open]

details-elementet i åben tilstand

details[open]
summary::marker
::details-content

Skræddersyet indikator

Fjern standardpil med ::marker, og tilføj dit eget ikon med ::after.

/* Fjern eksisterende pil */
summary::marker {
  content: none;
}
summary::after {
  content: '+';
  font-family: system-ui;
  font-weight: 400;
  font-size: 1.1rem;
}

[open] summary::after {
  content: '–';
}

Animeret fold-ud

fra 0 til auto

p {
  transition: .3s;
  height: 0;
}

article:hover p {
  height: auto;
}

Animeret fold-ud

Animeret fold-ud

<details name="something">
  <summary>Titel</summary>
  <div>
    <!-- indhold -->
  </div>
</details>
::details-content {
  height: 0;
  overflow: clip;
  transition: .3s allow-discrete;
}

[open]::details-content {
  height: auto;
}

Forudsætter interpolate-size