Πώς να κάνετε ένα πτυσσόμενο DIV σε CSS

Χρησιμοποιήστε τις πτυσσόμενες ετικέτες DIV για να επιτρέψετε στους επισκέπτες στον ιστότοπό σας να διαβάσουν πρόσθετο περιεχόμενο χωρίς να αναγκαστούν να εγκαταλείψουν την τρέχουσα σελίδα. Αυτές οι ετικέτες σάς επιτρέπουν να δημιουργήσετε μια σελίδα με πολλές διευρυνόμενες επικεφαλίδες που επιτρέπουν στους χρήστες να βλέπουν μόνο τις λεπτομέρειες που τους ενδιαφέρουν, χωρίς να διαπερνούν μεγάλες σελίδες κειμένου. Οι πιο γρήγορες αναζητήσεις κάνουν τον ιστότοπό σας πιο φιλικό προς το χρήστη και αυξάνουν την αξία του στους επισκέπτες σας ως εργαλείο αναφοράς.

Βήμα 1

Δημιουργήστε μια ετικέτα που περιέχει το αναδυόμενο κείμενο. " του κώδικα HTML. Ορισμός αρχικής κατάστασης εμφάνισης σε καμία:

Αναδυόμενο κείμενο

Πώς φαίνεται αυτό;

Βήμα 2

Αντιστοιχίστε μια υπερσύνδεση αγκύρωσης για να ανοίξετε ένα JavaScript για να εκτελέσετε το πραγματικό αναδυόμενο παράθυρο στην ετικέτα "

". Σε αυτή τη δέσμη ενεργειών, κάνοντας κλικ στο αριστερό πλήκτρο του ποντικιού, ενεργοποιείται ο σύνδεσμος. Τοποθετήστε αυτόν τον κώδικα απευθείας κάτω από την προηγούμενη γραμμή: Κάντε κλικ για να επεκτείνετε

Δημιουργήστε τη λειτουργία JavaScript που ελέγχει την προβολή του κρυμμένου κειμένου CSS. Τοποθετήστε αυτή τη λειτουργία στην ενότητα "" του κώδικα HTML:

Συμβουλή

Σε αυτό το παράδειγμα, εμφανίζεται το κείμενο "Κάντε κλικ για εμφάνιση ή απόκρυψη" με τις ιδιότητες που αντιστοιχίζονται στην ετικέτα. Την πρώτη φορά που ο χρήστης κάνει κλικ στο κείμενο, στην οθόνη εμφανίζεται το μήνυμα "Αναδυόμενο κείμενο", "Πώς φαίνεται αυτό;" με την επιστροφή του στη θέση του κόμμα. Το μήνυμα εξαφανίζεται όταν ο χρήστης κάνει κλικ στην ετικέτα για δεύτερη φορά.