Η ετικέτα details
Η ετικέτα details δημιουργεί ένα spoiler σε HTML,
δηλαδή χρησιμοποιείται για πληροφορίες που
μπορούν να αποκρυφθούν ή να εμφανιστούν κατά την επιθυμία του χρήστη.
Από προεπιλογή τα περιεχόμενα της ετικέτας είναι κρυμμένα, για
να εμφανιστούν κατόπιν αιτήματος του χρήστη πρέπει
να προστεθεί η ετικέτα
summary, η οποία καθορίζει την επικεφαλίδα
για την ετικέτα details. Αυτή η επικεφαλίδα είναι πάντα
ορατή στη σελίδα (ακόμα και αν τα περιεχόμενα της details
βρίσκονται σε διπλωμένη κατάσταση) και μπορείς
να κάνεις κλικ πάνω της για να αναπτύξεις το κρυφό
κείμενο ή να το διπλώσεις.
Επίσης για την εμφάνιση των κρυφών περιεχομένων μπορείς
να χρησιμοποιήσεις το χαρακτηριστικό open της ετικέτας details
(για παράδειγμα, για να εμφανίσεις τα περιεχόμενα της details
με τη βοήθεια της JavaScript).
Παράδειγμα
Ας δούμε πώς λειτουργεί η ετικέτα details:
<details>
<summary>κλικ σε μένα</summary>
κρυφό κείμενο
</details>
:
Δείτε επίσης
-
το χαρακτηριστικό
hidden,
που αποκρύπτει μπλοκ στη σελίδα
