Δημιουργήστε ένα ακορντεόν μόνο σε HTML για απόκρυψη και αποκάλυψη περιεχομένου (χωρίς JS ή CSS)

in Πόροι και εργαλεία

Γνωρίζατε ότι υπάρχει μια εγγενής λύση HTML5 για να δημιουργήσετε πολύ εύκολα ένα κουμπί ανάγνωσης περισσότερων/λιγότερο ακορντεόν για απόκρυψη και αποκάλυψη περιεχομένου ΟΧΙ JavaScript ή CSS. Διαβάστε παρακάτω για να μάθετε πώς.

html5 ακορντεόν

Η και Οι ετικέτες HTML5 είναι επίσημα α στοιχείο γραφικού στοιχείου αποκάλυψης, Αλλά η ζευγαρωμένο με Οι ετικέτες HTML5 θα σας δώσουν ένα καθαρό ακορντεόν μόνο HTML.

Νόημα όχι JS Ή CSS απατείται. Τι ωραίο είναι αυτό!

Ακολουθεί ένα παράδειγμα που δείχνει ένα απλό στοιχείο με α και .

Εδώ είναι ο κωδικός:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

και ιδού πώς θα φαίνεται:

Διαβάστε Περισσότερα

Αυτό είναι ένα εγγενές ακορντεόν HTML5 για απόκρυψη και αποκάλυψη περιεχομένου. Πολύ ωραίο, σωστά;

Πώς λειτουργεί; Η  Η ετικέτα χρησιμεύει ως περιτύλιγμα για ένα στοιχείο που μπορεί να ανοίξει ή να κλείσει. Ο χρήστης πρέπει να κάνει κλικ στην ετικέτα που είναι το ετικέτα για να ανοίξετε ή να κλείσετε το στοιχείο.

Τι γίνεται με το στυλ και τη συμπεριφορά;

Στυλ

Μπορείτε να εφαρμόσετε στυλ CSS για να προσαρμόσετε την εμφάνιση του πλαισίου κειμένου αποκάλυψης. Το παρακάτω δίνει ένα στυλ διεπαφής με καρτέλες:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Από προεπιλογή, ο δρομέας εμφανίζεται σαν βέλος, αλλά αν θέλετε να είναι α δείχνοντας το χέρι στη συνέχεια χρησιμοποιήστε αυτό:

details {
cursor: pointer;
}

συμπεριφορές

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

Για να ξεκινήσετε το ακορντεόν στην ανοιχτή του κατάσταση, προσθέστε το Boolean ανοίξτε χαρακτηριστικό στο ετικέτα:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Διαβάστε Περισσότερα

Αυτό είναι ένα εγγενές ακορντεόν HTML5 για απόκρυψη και αποκάλυψη περιεχομένου. Πολύ ωραίο, σωστά;

Τι χαρακτηριστικά μπορώ να χρησιμοποιήσω;

Τα παρακάτω χαρακτηριστικά μπορούν να χρησιμοποιηθούν για το ετικέτα:

ΧαρακτηριστικόαξίαΧαρακτηριστικά
ανοίξτεανοίξτεΗ προεπιλογή είναι δεν είναι ανοιχτό.
id  αξίαΠαρέχει ένα μοναδικό αναγνωριστικό.
τάξη  ονόματα τάξεωνΕκχωρεί ονόματα κλάσεων στο στοιχείο.
στυλ  CSS-τιμέςΕκχωρεί στυλ CSS στο στοιχείο.

Ποιοι είναι λοιπόν οι περιορισμοί; Πάντα υπάρχει κάτι, έτσι δεν είναι;

Δεν υπάρχει υποστήριξη για τον Internet Explorer

Αυτό το ακορντεόν μόνο HTML5 δεν θα λειτουργήσει σε καμία έκδοση του Internet Explorer. Εάν πρέπει να το έχετε να υποστηρίζει IE11, θα πρέπει να χρησιμοποιήσετε μια διαφορετική εναλλακτική λύση χρησιμοποιώντας το JQuery. Όλα τα άλλα προγράμματα περιήγησης υποστηρίζουν και .

Δεν υπάρχουν προσαρμοσμένα κινούμενα σχέδια ή μεταβάσεις

Ενώ μπορείτε να τροποποιήσετε και να διαμορφώσετε την εμφάνιση (όπως φαίνεται παραπάνω), δεν θα μπορείτε να αποκαλύψετε κινούμενα σχέδια ή μεταβάσεις κειμένου. Εάν θέλετε να το κάνετε αυτό, θα χρειαστείτε μια άλλη λύση ακορντεόν CSS/JSS.

Αναγνώστες οθόνης και προσβασιμότητα

Αυτό είναι εγγενές HTML5 και *πρέπει* να είναι προσβάσιμο, αλλά έχει διαπιστωθεί ότι το πραγματικό κείμενο που αποκαλύφθηκε δεν ανακοινώνεται πάντα σωστά από ένα πρόγραμμα ανάγνωσης οθόνης.

αναφορές:

σχετικά με το Συγγραφέας

Ματ Άλγκρεν

Ο Mathias Ahlgren είναι ο Διευθύνων Σύμβουλος και ιδρυτής της Website Rating, καθοδηγώντας μια παγκόσμια ομάδα συντακτών και συγγραφέων. Είναι κάτοχος μεταπτυχιακού τίτλου στην επιστήμη και τη διαχείριση της πληροφορίας. Η καριέρα του στράφηκε στο SEO μετά από πρώιμες εμπειρίες ανάπτυξης ιστού κατά τη διάρκεια του πανεπιστημίου. Με περισσότερα από 15 χρόνια στο SEO, το ψηφιακό μάρκετινγκ και τους προγραμματιστές ιστού. Η εστίασή του περιλαμβάνει επίσης την ασφάλεια ιστοτόπων, που αποδεικνύεται από πιστοποιητικό στον τομέα της ασφάλειας στον κυβερνοχώρο. Αυτή η ποικιλόμορφη τεχνογνωσία στηρίζει την ηγεσία του στο Website Rating.

Αρχική » Πόροι και εργαλεία » Δημιουργήστε ένα ακορντεόν μόνο σε HTML για απόκρυψη και αποκάλυψη περιεχομένου (χωρίς JS ή CSS)

Μείνετε ενημερωμένοι! Εγγραφείτε στο ενημερωτικό μας δελτίο
Εγγραφείτε τώρα και αποκτήστε δωρεάν πρόσβαση σε οδηγούς, εργαλεία και πόρους μόνο για συνδρομητές.
Μπορείτε να διαγραφείτε ανά πάσα στιγμή. Τα δεδομένα σας είναι ασφαλή.
Μείνετε ενημερωμένοι! Εγγραφείτε στο ενημερωτικό μας δελτίο
Εγγραφείτε τώρα και αποκτήστε δωρεάν πρόσβαση σε οδηγούς, εργαλεία και πόρους μόνο για συνδρομητές.
Μπορείτε να διαγραφείτε ανά πάσα στιγμή. Τα δεδομένα σας είναι ασφαλή.
Μοιράστε σε...