Snel een Herinnering die Details/Samenvatting is de Gemakkelijkste Manier Ooit om het Maken van een Accordeon

0
30

Goh zegenen de <details> element. Gooi nog wat inhoud erin en je hebt een toegankelijke vouw-voor-meer interactie met slechts ongeveer nul werken.

Zie de Pen Eenvoudige details. door Chris Coyier (@chriscoyier) op CodePen.

Gooi een <summary> in om aan te passen wat de expander tekst zegt.

Zie de Pen Meerdere Details/Samenvatting van Chris Coyier (@chriscoyier) op CodePen.

Werkt geweldig voor Veelgestelde vragen.

Er is echt geen limiet aan hoe kunt u de stijl van hen. Als u niet houdt van de standaard focus ring, kunt u die verwijderen, maar zorg ervoor dat u een soort van styling terug.

Ik heb hier gebruik gemaakt van een header-element voor elk uitbreidbaar afdeling, die een focus staat dat bootst andere interactieve elementen op de pagina.

De enige browser die dit niet ondersteund zijn Microsoft (en van de Opera Mini, waardoor een gevoel dat het niet echt doen interactieve).

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
12 15 49 Geen Geen 6

Mobiele / Tablet

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

Maar zelfs dan, het is net als alle afdelingen zijn geopend, dus het is niet een grote deal:

Wil je de stijl die standaard driehoek? Vreemd genoeg is de standaard manier om dat te doen is door middel van de list-style-eigenschappen. Maar Blink-gebaseerde browsers nog niet ingehaald te zijn dat nog niet, dus ze hebben een eigen manier om het te doen. Ze kunnen gecombineerd worden hoor. Hier is een voorbeeld van het te vervangen met een afbeelding:

samenvatting {
list-style-image: url(rechts-pijl.svg);
}

samenvatting::-webkit-details-markering {
background: url(rechts-pijl.svg);
kleur: transparant;
}

Zie de Pen Aangepaste Markeringen op Details/Samenvatting van Chris Coyier (@chriscoyier) op CodePen.

Helaas, ze draaien niet, en er is geen manier om te animeren van de standaard driehoek. Een idee zou kunnen zijn om het doel :focus staat en swap achtergronden:

Zie de Pen Aangepaste Markeringen op Details/Overzicht van Geoff Graham (@geoffgraham) op CodePen.

Maar dat lijkt te worden beperkt tot WebKit en Knipperen en zelfs dan, de pijl zal terugkeren wanneer het artikel niet is scherpgesteld, zelfs wanneer het item wordt nog steeds uitgebreid.