Details og Summary i HTML

Spørsmål:

Vi har i dag en Accordion («trekkspillmeny») hvor man kan åpne et element for å se mer informasjon. Klikker man på nytt lukkes elementet. Dette er basert på JavaScript, jeg tror kanskje det er jQuery som brukes. Er det mulig å lage noe lignende uten bruk av JavaScript?

Svar:

Ja, det lar seg gjøre i HTML ved å bruke <details> og <summary>.

<details>
     <summary>Produktdetaljer</summary>
     <p>Produktnavn.<br>
        På lager.<br>
        Leveringstid: 1 uke.
      </p>
</details>

I hvilke nettlesere fungerer dette?

Se våre kurs i HTML og CSS.