Erstellen Sie ein reines HTML-Akkordeon, um Inhalte zu verbergen und anzuzeigen (kein JS oder CSS)

in Ressourcen und Tools

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.

html5 Akkordeon

Die 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:

Erfahre mehr

Dies ist ein natives HTML5-Akkordeon zum Ausblenden und Anzeigen von Inhalten. Ziemlich cool, oder?

Wie funktioniert das? Die  -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>
Erfahre mehr

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:

AttributWertZusammenfassung
XNUMXh geöffnetXNUMXh geöffnetStandardeinstellung ist nicht offen.
id  WertStellt eine eindeutige Kennung bereit.
Klasse  KlassennamenWeist dem Element Klassennamen zu.
Stil  CSS-WerteWeist 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:

Über den Autor

Matt Ahlgren

Mathias Ahlgren ist CEO und Gründer von Website Rating, leitet ein globales Team von Redakteuren und Autoren. Er hat einen Master in Informationswissenschaft und Management. Seine Karriere drehte sich nach ersten Erfahrungen in der Webentwicklung während des Studiums um SEO. Mit über 15 Jahren Erfahrung in SEO, digitalem Marketing und Webentwicklung. Zu seinen Schwerpunkten gehört auch die Website-Sicherheit, nachgewiesen durch ein Zertifikat in Cyber ​​Security. Dieses vielfältige Fachwissen untermauert seine Führung bei Website Rating.

Startseite » Ressourcen und Tools » Erstellen Sie ein reines HTML-Akkordeon, um Inhalte zu verbergen und anzuzeigen (kein JS oder CSS)

Bleib informiert! Abonnieren Sie unseren Newsletter
Abonnieren Sie jetzt und erhalten Sie kostenlosen Zugang zu Leitfäden, Tools und Ressourcen nur für Abonnenten.
Sie können sich jederzeit abmelden. Ihre Daten sind sicher.
Bleib informiert! Abonnieren Sie unseren Newsletter
Abonnieren Sie jetzt und erhalten Sie kostenlosen Zugang zu Leitfäden, Tools und Ressourcen nur für Abonnenten.
Sie können sich jederzeit abmelden. Ihre Daten sind sicher.
Teilen mit...