details og summary som visningskomponent
Bygg innebygde komponenter for å utvide og skjule innhold uten JavaScript
details og summary som visningskomponent er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva er details og summary?
Elementene <details> og <summary> oppretter en innebygd utfoldingswidget — en komponent for å vise og skjule innhold — uten JavaScript:
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard markup language
used to create web pages.</p>
</details>Slik fungerer det
Interaksjonsatferd:
- Som standard er bare
<summary>synlig - Når du klikker på summary, vises eller skjules resten av innholdet
- En trekant for utfolding vises på summary som standard
- Ingen JavaScript kreves
open-attributtet
Attributtet open viser details-elementet utvidet på forhånd:
<details open>
<summary>Installation instructions</summary>
<ol>
<li>Download the installer</li>
<li>Run the installer</li>
<li>Restart your computer</li>
</ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->Bygg en FAQ
FAQ-seksjoner er et perfekt bruksområde:
<h2>Frequently Asked Questions</h2>
<details>
<summary>Is HTML5 a programming language?</summary>
<p>No. HTML5 is a markup language that defines the structure and meaning
of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>
<details>
<summary>Do I need to close void elements?</summary>
<p>In HTML5, void elements like <img> and <br> do not require
a closing slash. Both <br> and <br /> are valid.</p>
</details>Styling av details og summary
Tilpass utseendet:
details {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
summary {
font-weight: 600;
cursor: pointer;
list-style: none; /* remove default triangle */
}
summary::before {
content: '▶ '; /* custom arrow */
}
details[open] > summary::before {
content: '▼ '; /* rotate when open */
}Fjern standardtrekanten
Trekanten for utfolding settes med list-style:
/* Remove the default arrow: */
summary {
list-style: none;
}
/* Firefox: */
summary::-webkit-details-marker {
display: none;
}
/* Then add a custom indicator: */
summary::after {
content: '+';
float: right;
}
details[open] summary::after {
content: '−';
}toggle-hendelsen
Fang opp åpning og lukking med toggle-hendelsen:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
if (details.open) {
console.log('Details opened');
// Track analytics, load content, etc.
} else {
console.log('Details closed');
}
});Trekkspill med details
Bygg et grunnleggende trekkspill — bare ett panel er åpent om gangen:
/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */
const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
d.addEventListener('toggle', () => {
if (d.open) {
allDetails.forEach(other => {
if (other !== d) other.removeAttribute('open');
});
}
});
});Tilgjengelighet for details og summary
Innebygde tilgjengelighetsfunksjoner:
- summary får tastaturfokus og kan aktiveres med Enter eller mellomromstasten
- Skjermlesere leser opp teksten i summary og utvidelsestilstanden
- Det skjulte innholdet finnes i DOM-en, men annonseres som skjult til det utvides
name-attributtet for eksklusivt trekkspill
HTML 2025 legger til name i details for et innebygd eksklusivt trekkspill:
<details name="faq">
<summary>Question 1</summary>
<p>Answer 1...</p>
</details>
<details name="faq">
<summary>Question 2</summary>
<p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->Lazy loading av innhold med toggle
Last inn innholdet først når details åpnes:
<details id="advanced">
<summary>Load advanced settings...</summary>
<div id="advanced-content">Loading...</div>
</details>
<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
if (d.open) {
const res = await fetch('/api/settings');
const html = await res.text();
document.getElementById('advanced-content').innerHTML = html;
d.removeEventListener('toggle', arguments.callee);
}
}, { once: true });
</script>Hurtigsjekk
Hvilket element inneholder den alltid synlige utløsende teksten i en details-utfoldingswidget?
Oppsummering: detaljer og sammendrag
Det viktigste om disclosure-widgeter:
<details>+<summary>— innebygd utvidelse og skjuling, uten behov for JavaScriptopen-attributtet — åpne på forhånd- toggle-hendelsen — reager på åpning og lukking
- Stilsett med CSS; fjern standardtrekanten med list-style: none
name-attributtet — eksklusivt accordion (Chrome 120+)
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «details og summary som visningskomponent» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «details og summary som visningskomponent», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «details og summary som visningskomponent»?
Bygg innebygde komponenter for å utvide og skjule innhold uten JavaScript Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «details og summary som visningskomponent»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- aside og supplerende innhold
- figure og figcaption på nytt
- details og summary som visningskomponent
- progress- og meter-elementene