Budowanie akordeonu PE
Budowanie akordeonu działającego bez JavaScript, a następnie jego ulepszanie
Budowanie akordeonu PE to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Cel: działający akordeon bez JS
Wersja akordeonu zgodna z PE korzysta wyłącznie z HTML — z wbudowanej pary elementów <details>/<summary>. Kliknięcie elementu summary przełącza panel. Rozwiązanie działa bez CSS, JS i frameworka, ponieważ jest wbudowane w HTML.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>Wbudowana dostępność
<summary> to przycisk, który można ustawić fokusem i aktywować z klawiatury (Enter/Space przełącza jego stan). Czytniki ekranu informują o stanie rozwinięcia lub zwinięcia. Dwa elementy HTML zapewniają to, czego osiągnięcie za pomocą niestandardowego akordeonu React może wymagać dziesiątek wierszy kodu ARIA i obsługi zdarzeń.
Nakładanie stylów CSS
Za pomocą zwykłego CSS można ostylować trójkąt rozwijania, odstępy panelu i przejścia. Atrybut open odzwierciedla stan, więc reguła details[open] summary { color: blue; } jest stosowana tylko po rozwinięciu. Do dopracowania wyglądu nie jest potrzebny JS.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Animowanie otwierania i zamykania
Domyślne otwieranie i zamykanie odbywa się natychmiast. Animację można uzyskać, animując content-visibility albo używając JS, który mierzy wysokość panelu i animuje max-height. W prostych przypadkach gwałtowne przełączenie jest akceptowalne; animacja jest dodatkiem CSS+JS wdrażanym progresywnie.
Rozszerzanie za pomocą JavaScript
JS może dodać przydatne funkcje: zamykanie innych akordeonów po otwarciu jednego z nich (tryb pojedynczego otwarcia), zapisywanie stanu otwarcia w localStorage, animowanie przejścia albo analityczne śledzenie rozwiniętych elementów. Każde rozszerzenie jest wyłącznie dodatkiem.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});Zdarzenie toggle
<details> emituje zdarzenie toggle za każdym razem, gdy zmienia się jego stan open. Można go użyć do reagowania na rozwinięcie przez użytkownika bez ponownego podpinania obsługi kliknięć. Jest zgodne zarówno z kliknięciami myszy, jak i aktywacją za pomocą klawiatury.
Stan renderowania po stronie serwera
Aby wyrenderować początkowo otwarty akordeon, należy ustawić po stronie serwera atrybut open: <details open>. Stan jest zapisany w HTML, dzięki czemu jest dostępny dla robotów indeksujących i użytkowników korzystających z wolnych połączeń, zanim wykona się jakikolwiek JS.
Gdy wbudowane rozwiązanie nie wystarcza
Jeśli projekt wymaga niestandardowej ikony rozwijania lub zwijania, animowanego ujawniania treści albo panelu wielokolumnowego, należy zbudować własną wersję — ale w miarę możliwości użyć <details>/<summary> jako jej podstawowej struktury. ARIA należy dodać tylko wtedy, gdy w ogóle nie można użyć elementów natywnych.
Weryfikacja bez JS
Należy wyłączyć JavaScript w DevTools i sprawdzić, czy akordeon nadal działa: kliknięcie summary, przełączanie panelu, logiczna kolejność fokusu oraz aktywacja za pomocą klawiatury. Jeśli coś nie działa, JS nie jest ulepszeniem — jest wymaganiem, co narusza PE.
Tryb pojedynczego otwarcia tylko w CSS
Aby bez JS uzyskać zachowanie znane z przycisków radiowych, czyli „w danym momencie otwarty jest tylko jeden element”, należy użyć atrybutu name na <details> (obsługiwane w Chrome/Safari): wszystkie elementy <details name="faq"> współdzielą stan, więc otwarcie jednego zamyka pozostałe. To wzorzec oparty wyłącznie na HTML, który działa podobnie jak przyciski radiowe.
Migracja z akordeonu działającego wyłącznie w JS
Należy zastąpić elementy div i JS przez <details>/<summary>, zachowując klasy CSS do stylowania. Rezultatem jest krótszy HTML, brak zależności od JS, lepsza dostępność i indeksowalna treść. Większość akordeonów opartych wyłącznie na JS można przenieść do PE przy minimalnej widocznej dla użytkownika zmianie.
Sprawdzenie wiedzy
Jaka para elementów HTML zapewnia w pełni działający akordeon bez JavaScriptu?
Podsumowanie
Akordeon PE wykorzystuje natywne <details>/<summary> jako podstawę — jest w pełni dostępny i można nim sterować z klawiatury bez JS. Style CSS służą do uzyskania wyglądu, a opcjonalny JS może obsługiwać animacje lub tryb pojedynczego otwarcia. Należy sprawdzić po wyłączeniu JS, czy podstawa nadal działa. Nowy atrybut name umożliwia nawet tryb pojedynczego otwarcia tylko w CSS.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Budowanie akordeonu PE” jest bezpłatna?
Tak — pełny tekst „Budowanie akordeonu PE” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Budowanie akordeonu PE”?
Budowanie akordeonu działającego bez JavaScript, a następnie jego ulepszanie Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Budowanie akordeonu PE”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Filozofia PE — zacznij od HTML
- Wykrywanie funkcji a rozpoznawanie przeglądarki
- Graceful Degradation a Progressive Enhancement
- Budowanie akordeonu PE