Co zapewniają elementy `
` i `
`?

Question

Co zapewniają elementy `

` i `

`?

IT Interview Practice · Accepted Answer

`

` i `

` tworzą **natywny widget ujawniania** — sekcję rozwinięcia/zawinięcia — bez **żadnego JavaScriptu**. Przeglądarka obsługuje przełączanie, obsługę klawiatury i dostępność dla Ciebie. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** to etykieta, którą można kliknąć (pierwsze dziecko). - Wszystko po niej to zwijana zawartość. - Kliknięcie podsumowania przełącza otwarcie/zamknięcie — natywnie dostępne z klawiatury (Enter/Space) i prawidłowo ogłaszane przez czytniki ekranu. ## Otwarte domyślnie i wykrywanie stanu ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Stylizowanie znacznika ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Rzeczywiste przypadki użycia Akordony FAQ, sekcje "pokaż więcej", zwijane paski boczne, tekst spoilera, rozwijane wiersze tabeli. Przed tym elementem każdy akordeon wymagał JavaScriptu plus podłączenia ARIA dla dostępności — teraz to tylko dwa znaczniki semantyczne. ## Dlaczego to ważne `

`/`

` dają Ci dostępną, przyjazną dla klawiatury zawartość zwijaną bez JS i bez ręcznego ARIA — doskonały przykład korzystania z platformy. Używaj go dla FAQ i wzorców "pokaż więcej" przed budowaniem niestandardowego akordeon.

Co zapewniają elementy `<details>` i `<summary>`?

Otwarte domyślnie i wykrywanie stanu

Stylizowanie znacznika

Rzeczywiste przypadki użycia

Dlaczego to ważne

Powiązane pytania