Τα ακορντεόν CSS χρησιμοποιούνται ευρέως για επεκτάσιμα και πτυσσόμενα μενού, αποσπάσματα, εικόνες, βίντεο, συχνές ερωτήσεις, λίστες και αποσπάσματα άρθρων. Μπορείτε εύκολα να τα δημιουργήσετε χρησιμοποιώντας HTML, CSS και JavaScript (ή jQuery). Η δημιουργία ακορντεόν μόνο με CSS είναι μια δύσκολη εργασία, αλλά είναι εξαιρετικά χρήσιμη σε περιβάλλοντα με απενεργοποιημένη JavaScript.

Σε αυτόν τον οδηγό, θα μάθετε μια βήμα προς βήμα προσέγγιση για τη δημιουργία ενός ακορντεόν μόνο CSS.

Δημιουργία βασικού ακορντεόν με χρήση μόνο HTML

Εάν η προτεραιότητά σας είναι να δημιουργήσετε ένα προσβάσιμο ακορντεόν χρησιμοποιώντας HTML, το και Οι ετικέτες είναι ο δρόμος. Δεν έχει σημασία ποια γλώσσα προγραμματισμού χρησιμοποιείτε, το ακορντεόν μόνο σε HTML θα παραμείνει ανέπαφο. Δημιουργώ ένα προσθέστε ετικέτα ως γονέα και εισαγάγετε την ερώτηση στο α ετικέτα. Γράψτε μια περιγραφική απάντηση μέσα στο α ετικέτα. Επαναλάβετε τη διαδικασία για οποιονδήποτε αριθμό συχνών ερωτήσεων.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer







FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, μείον placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Στυλ στο Ακορντεόν

Μπορείτε να διαμορφώσετε το ακορντεόν προσαρμόζοντας το χρώμα του φόντου, συνοριακή ακτίνα, περιθώριο, υλικό παραγεμίσματος, και τα λοιπά.

σώμα {
 γραμματοσειρά οικογένειας:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Γενεύη, Verdana, sans-serif;
 μέγιστο πλάτος: 30 εκ.
 περιθώριο: 1,5 rem auto;
}
περίληψη {
 βάρος γραμματοσειράς: 600;
 χρώμα: rgb (255, 255, 255);
 χρώμα φόντου: rgb (7, 185, 255);
 padding: 1,2rem;
 margin-bottom: 1,2rem;
 ακτίνα συνόρων: 0,5 rem;
 δρομέας: δείκτης;
}

Παραγωγή:

Ο μόνος περιορισμός είναι ότι δεν θα έχετε τον έλεγχο σε κάθε μέρος του κώδικα. Η δομή HTML μπορεί να τροποποιηθεί, αλλά δεν μπορείτε να δημιουργήσετε ένα προσαρμοσμένο ακορντεόν. Επομένως, ας δημιουργήσουμε μια προσαρμοσμένη ενότητα Συχνών Ερωτήσεων χρησιμοποιώντας προηγμένο CSS.

Δημιουργήστε την προσαρμοσμένη ενότητα Συχνών Ερωτήσεων

Υπάρχουν δύο δημοφιλείς μέθοδοι για να δημιουργήσετε ένα προσαρμοσμένο ακορντεόν μόνο CSS. Μπορείτε είτε να χρησιμοποιήσετε πλαίσια ελέγχου είτε κουμπιά επιλογής. θα εξηγήσουμε και τις δύο μεθόδους.

Χρησιμοποιώντας τη μέθοδο του πλαισίου ελέγχου

Η μέθοδος πλαισίου ελέγχου χρησιμοποιεί πλαίσιο ελέγχου ως τύπος εισόδου. Κάθε φορά που ένας χρήστης επιλέγει μια καρτέλα, επισημαίνει το πλαίσιο ελέγχου και ανοίγει. Μπορείτε να ανοίξετε πολλές καρτέλες ταυτόχρονα χρησιμοποιώντας τη μέθοδο του πλαισίου ελέγχου, παρόμοια με το πώς μπορείτε να επισημάνετε περισσότερα από ένα πλαίσια ελέγχου μέσα σε ένα Φόρμα HTML.

HTML

Προσαρμοσμένο ακορντεόν μόνο CSS (FAQ)

Χρήση της μεθόδου Checkbox






Πώς να φτιάξετε ένα προσαρμοσμένο ακορντεόν χρησιμοποιώντας μόνο CSS;


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Πώς να αλλάξετε το ύψος των ψευδοστοιχείων;


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatatibus
 ducimus exclusiveuri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

Γενικό CSS

Εφαρμόστε το βασικό CSS στο σώμα.

σώμα {
 χρώμα: #502c2c;
 φόντο: #f1edec;
 padding: 1,2rem;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 μέγιστο πλάτος: 45 εκ.
 περιθώριο: 0 αυτόματο;
 μέγεθος γραμματοσειράς: 1,2 rem;
}

Στυλ στο Ακορντεόν

Αρχικά, αποκρύψτε τα πλαίσια ελέγχου τροποποιώντας την εισαγωγή.

/* Απόκρυψη των πλαισίων ελέγχου ή του κουμπιού επιλογής*/
εισαγωγή {
 θέση: απόλυτη;
 αδιαφάνεια: 0;
 z-index: -1;
}

Τώρα, στυλ στο ακορντεόν. Μπορείτε να προσθέσετε ένα::μετά ψευδοστοιχείο για το + σημάδι. Μπορείτε να ανατρέξετε στο α Γράφημα αναφοράς οντότητας χαρακτήρων και χρησιμοποιήστε οποιοδήποτε Υπολογιστής μετατροπής οντοτήτων για να βρείτε την τιμή CSS μιας αριθμητικής τιμής. Εδώ, η τιμή CSS του + είναι \002Β.

/* Στυλ ακορντεόν */
.faq {
 χρώμα: #ffe3e3;
 περιθώριο-κάτω: 3 εκ.
}
.faq-label {
 μέγεθος γραμματοσειράς: 1,5 rem;
 οθόνη: flex;
 στοίχιση-στοιχεία: κέντρο;
 justify-content: space-mes?
 γέμιση: 1em;
 φόντο: #b61818;
 βάρος γραμματοσειράς: έντονη γραφή;
 δρομέας: δείκτης;
 επιλογή χρήστη: κανένας;
}
.faq-label:: μετά από {
 περιεχόμενο: '\002B';
 padding: 0,51rem;
 μετασχηματισμός: κλίμακα (1,8);
 text-align: κέντρο;
 μετάβαση: όλα τα 0,35s;
}
.faq-content {
 μέγιστο ύψος: 0;
 γέμιση: 0 1em;
 χρώμα: #2c3e50;
 φόντο: λευκό;
 μετάβαση: όλα τα 0,35s;
 οθόνη: καμία;
}

Τώρα, ας προσθέσουμε λειτουργικότητα στο ακορντεόν χρησιμοποιώντας παρακείμενους και επιλογείς χαρακτηριστικών. Εδώ, \2013 είναι η τιμή CSS για –, η Αριθμητική τιμή που αντιπροσωπεύει –.

εισαγωγή: επιλεγμένο + .faq-label {
 φόντο: #8f1414;
}
εισαγωγή: επιλεγμένο + .faq-label:: μετά από {
 περιεχόμενο: '\2013';
 μετασχηματισμός: κλίμακα (1,5);
}
εισαγωγή: επιλεγμένο ~ .faq-content {
 μέγιστο ύψος: 100vh;
 γέμιση: 1em;
 οθόνη: μπλοκ;
 μετάβαση: όλα τα 0,35s;
}

Παραγωγή:

Χρήση της μεθόδου κουμπιού ραδιοφώνου

Η μέθοδος κουμπιού ραδιοφώνου έχει έναν τύπο εισόδου που έχει οριστεί σε ραδιόφωνο. Κάθε φορά που ο χρήστης κάνει κλικ σε μια καρτέλα, ανοίγει το κρυφό κουμπί επιλογής που αντιστοιχεί σε αυτήν την καρτέλα. Όταν κάνετε κλικ στην επόμενη καρτέλα, η προηγούμενη καρτέλα κλείνει αμέσως. Μπορείτε να ανοίξετε μόνο μία καρτέλα τη φορά χρησιμοποιώντας τη μέθοδο Radio Button.

HTML

Προσαρμοσμένο ακορντεόν μόνο CSS (FAQ)

Χρησιμοποιώντας τη μέθοδο Radio Button






Πώς να δημιουργήσετε ακορντεόν χρησιμοποιώντας τη μέθοδο Radio Button;


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Πώς να δημιουργήσετε ένα προσαρμοσμένο ακορντεόν χρησιμοποιώντας μόνο CSS;


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Τι σημαίνει στυλ ακορντεόν;


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas; Βελ, όχι!









Κλείσιμο όλων ×

CSS

Αντιγράψτε το παραπάνω CSS της μεθόδου πλαισίου ελέγχου, καθώς και οι δύο μέθοδοι διαφέρουν μόνο από δομική άποψη. Μπορεί να παρατηρήσετε ότι υπάρχει μια καρτέλα ανοιχτή όλη την ώρα. Αυτό συμβαίνει επειδή δεν μπορείτε να καταργήσετε την επισήμανση των κουμπιών επιλογής όπως τα πλαίσια ελέγχου. Για να το πετύχετε αυτό, προσθέστε τον παρακάτω κώδικα CSS σε ένα κουμπί επιλογής "Κλείσιμο όλων" χωρίς καμία περιγραφή.

/* Κλείσιμο όλων */
.faq-label {
 θέση: σχετική;
}
.faq-close {
 οθόνη: inline-block;
 padding: 1rem;
 μέγεθος γραμματοσειράς: 1rem;
 φόντο: #b61818;
 δρομέας: δείκτης;
 θέση: απόλυτη;
 αριστερά: 64 εκ.
}

Παραγωγή:

Συνεχίστε να πειραματίζεστε και προσθέστε κινούμενα σχέδια

Υπάρχει μια απλή λογική πίσω από τα ακορντεόν: όταν κάνετε κλικ σε ένα μενού, θα εμφανιστεί το κρυφό περιεχόμενό του. Επειδή τώρα ξέρετε πώς να δημιουργείτε ένα ακορντεόν, ήρθε η ώρα να εφαρμόσετε και να πειραματιστείτε με τη μάθησή σας. Μπορείτε να δημιουργήσετε οριζόντια ακορντεόν για να βελτιώσετε τη σχεδίαση, ειδικά κατά την προβολή εικόνων. Πειραματιστείτε με τον κώδικα προσαρμόζοντας το εφέ μετάβασης χρησιμοποιώντας κινούμενα σχέδια βασικών καρέ.

Naincy Mourya (Δημοσιεύτηκαν 16 άρθρα)

Η Naincy ειδικεύεται στη δημιουργία ιστοσελίδων υψηλής απόκρισης και αποτελεσματικής στρατηγικής περιεχομένου μαζί με αντίγραφα ιστού. Είναι μια ανεξάρτητη συγγραφέας τεχνολογίας που παρακολουθεί προσεκτικά τις τάσεις της τεχνολογίας.

Περισσότερα από τη Naincy Mourya