Τι παρέχουν τα στοιχεία details και summary;

Question

Accepted Answer

`

` και `

` δημιουργούν ένα **native disclosure widget** — μια επεκτάσιμη/συμπτυσσόμενη ενότητα — **χωρίς JavaScript**. Το πρόγραμμα περιήγησης χειρίζεται την εναλλαγή, την υποστήριξη πληκτρολογίου και την προσβασιμότητα για εσάς. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** είναι η κλικάρισιμη ετικέτα (το πρώτο παιδί). - Όλα μετά από αυτό είναι το συμπτυσσόμενο περιεχόμενο. - Η κλικ στο summary εναλλάσσει ανοιχτό/κλειστό — εγγενώς προσβάσιμο από το πληκτρολόγιο (Enter/Space) και ανακοίνωση σωστά από τα προγράμματα ανάγνωσης οθόνης. ## Ανοιχτό από προεπιλογή και ανίχνευση κατάστασης ```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 ``` ## Στυλ του δείκτη ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Πραγματικές περιπτώσεις χρήσης FAQ accordions, ενότητες "εμφάνιση περισσότερων", συμπτυσσόμενες πλευρικές μπάρες, κείμενο spoiler, επεκτάσιμες σειρές πίνακα. Πριν από αυτό το στοιχείο, κάθε accordion χρειαζόταν JavaScript συν σύρματα ARIA για την προσβασιμότητα — τώρα είναι δύο σημασιολογικές ετικέτες. ## Γιατί έχει σημασία `

`/`

` σας δίνουν προσβάσιμο, φιλικό προς το πληκτρολόγιο συμπτυσσόμενο περιεχόμενο χωρίς JS και χωρίς χειroctoμικό ARIA — ένα τέλειο παράδειγμα χρήσης της πλατφόρμας. Σηκώστε το για FAQs και μοτίβα "εμφάνιση περισσότερων" πριν δημιουργήσετε ένα προσαρμοσμένο accordion.