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>

details / summary

-attributter

details

name

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

open

angiver, om indholdet vises

-attributter

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

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

øvelse 1-2

Sæt en accordion op

Brug <details> og <summary> og tilføj open-attributten til det første <details>. Tilføj derefter name-attributten til alle <details>, så kun én kan være åben ad gangen.

<details>

<summary>

open

Lad den forblive åben

Åbn første øvelse

name

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: '–';
}

øvelse 3

Skræddersyet pil

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

::marker

::after

Lad den forblive åben

Åbn øvelse

Animeret fold-ud

fra 0 til 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

øvelse 4

Animeret fold-ud-effekt

Animér ::details-content med allow-discrete og interpolate-size.

 

::details-content

::interpolate-size

Åbn øvelse

transition-behavior

Details (Accordion)

By Dannie Vinther

Details (Accordion)

HTML: details/summary

  • 279

More from Dannie Vinther