Wussten Sie, dass es eine native HTML5-Lösung gibt, mit der Sie ganz einfach eine Akkordeon-Schaltfläche „Mehr/Weniger lesen“ erstellen können, mit der Sie Inhalte verbergen und anzeigen können? KEIN JavaScript oder CSS. Lesen Sie weiter, um herauszufinden, wie.
Das und HTML5-Tags sind offiziell a Offenlegungs-Widget-Element, Aber die gepaart mit HTML5-Tags geben Ihnen a reines Nur-HTML-Akkordeon.
Bedeutung kein JS ODER CSS wird gebraucht. Wie cool ist das!
Hier ist ein Beispiel, das ein einfaches Element mit a zeigt und .
Hier ist der Code:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>und so wird es aussehen:
Weiterlesen
Dies ist ein natives HTML5-Akkordeon zum Ausblenden und Anzeigen von Inhalten. Ziemlich cool, oder?
Wie funktioniert es? Das -Tag dient als Wrapper für ein Element, das geöffnet oder geschlossen werden kann. Der Benutzer muss auf das Etikett klicken, das das ist -Tag, um das Element zu öffnen oder zu schließen.
Was ist mit Styling und Verhalten?
Stile
Sie können CSS-Styling anwenden, um das Erscheinungsbild des Textfelds „Enthüllen“ anzupassen. Das Folgende gibt einen Schnittstellenstil mit Registerkarten:
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;
}Standardmäßig erscheint der Cursor wie ein Pfeil, aber wenn Sie möchten, dass er ein ist zeigende Hand Verwenden Sie stattdessen Folgendes:
details {
cursor: pointer;
}Behaviors
Das Festlegen von Verhaltensweisen ist sehr begrenzt, es gibt wirklich nur eine Sache, die Sie tun können, und das ist, den enthüllten Text zu erstellen standardmäßig geöffnet.
Um das Akkordeon im geöffneten Zustand zu starten, fügen Sie den booleschen Wert hinzu XNUMXh geöffnet Attribut an die tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Weiterlesen
Dies ist ein natives HTML5-Akkordeon zum Ausblenden und Anzeigen von Inhalten. Ziemlich cool, oder?
Welche Attribute kann ich verwenden?
Die folgenden Attribute können für die verwendet werden tag:
| Attribut | Wert | Zusammenfassung |
|---|---|---|
| XNUMXh geöffnet | XNUMXh geöffnet | Standardeinstellung ist nicht offen. |
| id | Wert | Stellt eine eindeutige Kennung bereit. |
| Klasse | Klassennamen | Weist dem Element Klassennamen zu. |
| Stil | CSS-Werte | Weist dem Element CSS-Stile zu. |
Was sind also die Einschränkungen? Es gibt immer einen Haken, nicht wahr?
Keine Unterstützung für Internet Explorer
Dieses Nur-HTML5-Akkordeon funktioniert in keiner Version von Internet Explorer. Wenn Sie IE11 unterstützen müssen, müssen Sie eine andere Fallback-Lösung mit JQuery verwenden. Alle anderen Browser werden unterstützt und .
Keine angepassten Animationen oder Übergänge
Während Sie das Erscheinungsbild ändern und gestalten können (wie oben gezeigt), können Sie keine Animationen oder Übergänge zum Anzeigen von Text erstellen. Wenn Sie das tun möchten, benötigen Sie eine andere CSS/JSS-Akkordeon-Lösung.
Screenreader und Zugänglichkeit
Das ist nativ HTML5 und es *sollte* zugänglich sein, aber es wurde festgestellt, dass der tatsächlich offenbarte Text von einem Screenreader nicht immer korrekt angesagt wird.
References:
