Zur Erinnerung, Details/Zusammenfassung ist der Einfachste Weg Überhaupt, um ein Akkordeon

0
28

Gott segne die <details> – element. Werfen Sie einige der Inhalt und Sie haben eine zugängliche erweitern-für mehr Interaktion mit fast-null-Arbeit.

Finden Sie den Stift, Einfache details. von Chris Coyier (@chriscoyier) auf CodePen.

Werfen Sie einen <summary> dort anpassen, was die expander text sagt.

Finden Sie den Stift Mehrere Details/Zusammenfassung von Chris Coyier (@chriscoyier) auf CodePen.

Funktioniert Super für die FAQs.

Es ist wirklich kein limit, wie können Sie Stil Sie. Wenn Sie nicht wie die Standard-Fokus-ring, können Sie Sie entfernen, aber stellen Sie sicher, um irgendeine Art von styling zurück.

Hier habe ich ein header-element für jede erweiterbarer Bereich, die einen Schwerpunkt Staat, der imitiert andere interaktive Elemente auf der Seite.

Der einzige browser, der dies nicht unterstützt, sind die von Microsoft (und Opera Mini, die Sinn macht—es nicht wirklich interaktiv).

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
12 15 49 Keine Keine 6

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1 37 Keine 4 64 57

Aber selbst dann, es ist wie bei allen Abschnitten geöffnet werden, so ist es nicht eine große Sache:

Willst du style, das Standard-Dreieck? Seltsam genug, dass der standard-Weg, dies zu tun ist durch die list-style-Eigenschaften. Aber Blink-basierten Browsern noch nicht aufgeholt, doch, so haben Sie eine geschützte Art, es zu tun. Sie können kombiniert werden obwohl. Hier ist ein Beispiel, ersetzen Sie es mit einem Bild:

Zusammenfassung {
list-style-image: url(Pfeil nach rechts.svg);
}

Zusammenfassung::-webkit-details-marker {
background: url(Pfeil nach rechts.svg);
Farbe: transparent;
}

Finden Sie den Stift Benutzerdefinierter Markierungen in Details/Zusammenfassung von Chris Coyier (@chriscoyier) auf CodePen.

Tun Sie aber leider nicht verwandeln, und es gibt keinen Weg, um zu animieren, das Standard-Dreieck. Eine Idee könnte sein, um das Ziel :Schwerpunkt Staat und swap-Hintergründe:

Finden Sie den Stift Benutzerdefinierter Markierungen in Details/Zusammenfassung von Geoff Graham (@geoffgraham) auf CodePen.

Aber das scheint nur auf WebKit und Blink, und selbst dann, der Pfeil wird zurückkehren, sobald die Sache aus dem Fokus, auch wenn der Artikel noch ausgebaut.