Πώς να επεκτείνετε & Σύμπτυξη ενός DIV στο JavaScript

Οι διαιρέσεις σας επιτρέπουν να ομαδοποιείτε στοιχεία σε μια ιστοσελίδα. Υπάρχουν δύο τρόποι να εξαφανιστούν οι διανομές σε μια ιστοσελίδα. Πρώτον, ένας κώδικας κάνει ένα div σε ένα αόρατο στοιχείο ή μπορείτε να χρησιμοποιήσετε την κατάρρευση. Εάν απλά κάνετε ένα div αόρατο, υπάρχει κενός χώρος όπου υπάρχει το div. Η κατάρρευση ενός διαμερίσματος καταργεί αυτόν τον κενό χώρο χωρίς να αφήνει "τρύπα" στην ιστοσελίδα σας. Χρησιμοποιώντας το JavaScript που συνδέεται με ένα κουμπί, μπορείτε να δημιουργήσετε τα δικά σας τμήματα που συμπτύσσονται και επεκτείνονται όταν οι χρήστες κάνουν κλικ στο κουμπί.

Προσθέστε Div σε Web Page

Βήμα 1 - Ανοίξτε οποιοδήποτε από τα HTML έγγραφα σας.

Βήμα 2

Προσθέστε αυτό το μπλοκ κώδικα HTML στην ενότητα "body" του εγγράφου:

Div text

Αυτός ο κώδικας δημιουργεί ένα div και ένα κουμπί. Το div περιέχει μια παράγραφο με κείμενο που διαβάζει: "Div κείμενο." Αντικαταστήστε αυτό το κείμενο με οτιδήποτε θέλετε. Το "κουμπί" καλεί μια λειτουργία JavaScript όταν κάνετε κλικ. Αυτή η συνάρτηση προκαλεί το div να αλλάξει μεταξύ μιας κατάρρευσης και μιας διεσταλμένης κατάστασης.

Εντοπίστε τις ιδιότητες "id" και "class" στην ετικέτα div. Για να δημιουργήσετε μια επέκταση και την κατάρρευση div, πρέπει να δώσετε την αξία div. Σε αυτό το παράδειγμα, αυτή η τιμή είναι "MyDiv". Το div έχει επίσης μια κατηγορία ιδιοκτησίας. Σε αυτή την περίπτωση, η αξία της ιδιοκτησίας είναι "divVisible". Αυτό είναι το όνομα μιας κλάσης CSS που ορίζεται στην επόμενη ενότητα.

Προσθήκη κλάσεων CSS και JavaScript

Βήμα 1

Προσθέστε τον ακόλουθο κώδικα CSS στην ενότητα "κεφάλι" του εγγράφου: δημιουργεί την κλάση "divVisible" και μια άλλη κατηγορία που ονομάζεται "divHidden". Η κλάση "divVisible" ορίζει την τιμή εμφάνισής της να "μπλοκάρει". Η τιμή "μπλοκ" καθιστά οποιοδήποτε στοιχείο HTML που αναφέρει την κλάση ορατό και το επεκτείνει ώστε να καταλαμβάνει χώρο στην ιστοσελίδα. Η κλάση "divHidden" ορίζει την τιμή εμφάνισής της σε "none". Οποιοδήποτε στοιχείο HTML που αναφέρεται σε αυτή την τάξη καταρρέει και δεν αφήνει χώρο πίσω.

Βήμα 2

Προσθέστε αυτόν τον κώδικα JavaScript κάτω από τον κώδικα CSS: Η μεταβλητή divID διατηρεί την τιμή id του div που θέλετε να καταρρεύσει και να επεκταθεί. Αυτή η τιμή είναι "MyDiv". Ο υπόλοιπος κώδικας αποκτά το τρέχον όνομα κλάσης CSS του div και το αλλάζει κάθε φορά που τρέχει ο κώδικας. Την πρώτη φορά που εκτελείται ο κώδικας, αλλάζει το όνομα της κλάσης του div στο "divHidden". Τη δεύτερη φορά που τρέχει, αλλάζει το όνομα της κλάσης πίσω στο "divVisible".

Βήμα 3

Αποθηκεύστε το έγγραφο HTML και ανοίξτε το στο πρόγραμμα περιήγησής σας. Εμφανίζεται η παράγραφος που περιέχει την παράγραφο σας

Κάντε κλικ στο κουμπί "Σύμπτυξη /Ανάπτυξη". Το κείμενο καταρρέει. Κάντε ξανά κλικ στο κουμπί για να αναπτύξετε το κείμενο. Σημειώστε πως το κουμπί και άλλα στοιχεία κάτω από το κείμενο μετακινούνται προς τα επάνω όταν το κείμενο αναδιπλώνεται και μετακινείται προς τα κάτω όταν το κείμενο επεκτείνεται