HTML tag <details> og <summary> er to elementer, der kan bruges til at oprette en interaktiv foldbar på en webside. Foldbaren gør det muligt for brugeren at udvide og sammenfolde en sektion af indholdet på siden, hvilket kan være nyttigt, hvis du vil holde siden kort og overskuelig, men stadig vil have mulighed for at tilbyde mere detaljeret information.
For at oprette en foldbar skal du først tilføje en <details> tag til HTML-koden på din side. Inden for denne tag skal du tilføje en <summary> tag, som vil fungere som foldbarens overskrift. Inden for <summary> tag’en kan du skrive teksten, der skal vises som overskriften for foldbaren.
Efter <summary> tag’en kan du tilføje al øvrigt indhold, som skal vises, når foldbaren udvides. Dette indhold skal indsættes inden for <details> tag’en, men efter <summary> tag’en.
<details>
<summary>Klik her for at udvide foldbaren</summary>
Foldbarens indhold vil blive vist her, når den udvides.
</details>Du kan også tilføje et attribut til <details> tag’en kaldet “open”, som automatisk åbner foldbaren, når siden indlæses. Dette kan være nyttigt, hvis du vil have foldbaren åben som standard, så brugeren kan se indholdet uden at skulle klikke på overskriften.
<details open>
<summary>Klik her for at sammenfolde foldbaren</summary>
Foldbarens indhold vil blive vist her, når den udvides.
</details>HTML tag <details> og <summary> er en enkel måde at oprette en interaktiv foldbar på din webside, så du kan tilbyde mere detaljeret information til brugerne uden at fylde siden med for meget tekst.
