Oprettelse af en PE-akkordeon
Opret en akkordeon, der fungerer uden JavaScript, og forbedr den derefter
Oprettelse af en PE-akkordeon er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Mål: En fungerende udfoldningskomponent uden JS
PE-versionen af en udfoldningskomponent bruger kun HTML — det indbyggede elementpar <details>/<summary>. Klik på summary for at åbne eller lukke panelet. Det fungerer uden CSS, JS eller rammeværk, fordi det er indbygget i HTML.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>Indbygget tilgængelighed
<summary> er en fokuserbar knap, der kan aktiveres med tastaturet (Enter/Space skifter tilstand). Skærmlæsere annoncerer, om indholdet er udfoldet eller sammenfoldet. To HTML-elementer giver det samme resultat, som en brugerdefineret React-accordion ellers skulle bruge snesevis af linjer ARIA- og hændelseshåndtering på at opnå.
Lagdeling med CSS
Stil udfoldelsestrekanten, panelets indvendige afstand og overgangene med almindelig CSS. Attributten open afspejler tilstanden, så details[open] summary { color: blue; } kun anvendes, når indholdet er udfoldet. Der er ikke brug for JS til den visuelle finpudsning.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Animering af åbning og lukning
Den indbyggede åbning og lukning sker øjeblikkeligt. Animer indholdet ved at lave en overgang på content-visibility eller med JS, der måler panelets højde og animerer max-height. I enkle tilfælde er det acceptabelt med det pludselige skift; animation er en gradvis CSS+JS-forbedring.
Udvidelse med JavaScript
JS kan tilføje praktiske ekstra funktioner: lukke andre accordions, når én åbnes (tilstand med én åben ad gangen), gemme den åbne tilstand i localStorage, animere overgangen eller registrere i analyseværktøjer, hvilke elementer der er udfoldet. Hver forbedring er rent ekstra.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});Toggle-hændelsen
<details> udløser en toggle-hændelse, hver gang dens åbne tilstand ændres. Brug den til at reagere på, at brugeren udfolder indholdet, uden at tilkoble klikhåndteringer igen. Den er kompatibel med både museklik og aktivering via tastatur.
Tilstand ved gengivelse på serveren
Hvis du vil gengive en accordion, der er åben fra start, skal du angive attributten open på serveren: <details open>. Tilstanden er indeholdt i HTML'en, så den er tilgængelig for crawlere og brugere med langsomme forbindelser, før JS overhovedet udføres.
Når den indbyggede løsning ikke er nok
Hvis designet kræver et brugerdefineret ikon til udfoldning og sammenfoldning, en animeret visning eller et panel med flere kolonner, kan du bygge en brugerdefineret version — men brug om muligt <details>/<summary> som grundstruktur. Tilføj kun ARIA, hvis du slet ikke kan bruge de indbyggede elementer.
Verifikation uden JS
Deaktivér JavaScript i DevTools, og kontrollér, at accordionen stadig fungerer: klik på summary, panelet skifter, fokusrækkefølgen forbliver logisk, og tastaturet aktiverer den. Hvis noget går i stykker, er JS ikke en forbedring — det er et krav, hvilket overtræder PE.
Kun CSS: én åben ad gangen
Hvis du vil have radio-knap-adfærden "kun én åben ad gangen" uden JS, skal du bruge attributten name på <details> (understøttes i Chrome/Safari): alle <details name="faq"> deler tilstand, så åbning af én lukker de andre. En ren HTML-løsning, der efterligner radioknapper.
Migrering fra en accordion, der kun bruger JS
Erstat divs+JS med <details>/<summary>, og bevar CSS-klasserne til styling. Resultatet er kortere HTML, ingen JS-afhængighed, bedre tilgængelighed og indhold, der kan indekseres. De fleste JS-accordions kan migreres til PE med minimale ændringer, der kan ses af brugeren.
Test din viden
Hvilket par HTML-elementer giver en fuldt fungerende accordion uden JavaScript?
Opsummering
En PE-accordion bruger de indbyggede <details>/<summary> som grundlag — fuldt tilgængelig og tastaturstyret uden JS. Læg CSS ovenpå til den visuelle styling og eventuelt JS til animationer eller adfærd med én åben ad gangen. Kontrollér ved at deaktivere JS, at grundfunktionaliteten stadig virker. Den nye attribut name gør endda en tilstand med én åben ad gangen mulig med kun CSS.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Oprettelse af en PE-akkordeon” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Oprettelse af en PE-akkordeon”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Oprettelse af en PE-akkordeon”?
Opret en akkordeon, der fungerer uden JavaScript, og forbedr den derefter Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Oprettelse af en PE-akkordeon”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- PE-filosofien: begynd med HTML
- Feature detection kontra browsersniffing
- Graceful degradation kontra progressive enhancement
- Oprettelse af en PE-akkordeon