Wist je dat er een native HTML5-oplossing is om heel eenvoudig een accordeon te maken lees meer/minder-knop om inhoud te verbergen en te onthullen met GEEN JavaScript of CSS. Lees verder om erachter te komen hoe.
De en HTML5-tags zijn officieel een onthullingswidgetelement, Maar de gepaard met HTML5-tags geven je een pure HTML-only accordeon.
Betekenis geen JS OF CSS is nodig. Hoe cool is dat!
Hier is een voorbeeld van een eenvoudig element met a en .
Hier is de code:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>en zo ziet het eruit:
Lees meer
Dit is een native HTML5-accordeon om inhoud te verbergen en te onthullen. Best cool, toch?
Hoe werkt het? De tag dient als omslag voor een element dat kan worden geopend of gesloten. De gebruiker moet klikken op het label dat de tag om het element te openen of te sluiten.
Hoe zit het met styling en gedrag?
Stijlen
U kunt CSS-stijlen toepassen om het uiterlijk van het onthullende tekstvak aan te passen. Het onderstaande geeft een interface-stijl met tabbladen:
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;
}Standaard wordt de cursor weergegeven als een pijl, maar als u wilt dat deze een wijzende hand gebruik dan dit:
details {
cursor: pointer;
}gedragingen
Het instellen van gedrag is zeer beperkt, er is eigenlijk maar één ding dat u kunt doen en dat is de geopenbaarde tekst maken standaard openen.
Om de accordeon in open toestand te starten, voegt u de Booleaanse open toe te schrijven aan de label:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Lees meer
Dit is een native HTML5-accordeon om inhoud te verbergen en te onthullen. Best cool, toch?
Welke attributen kan ik gebruiken?
De onderstaande attributen kunnen worden gebruikt voor de label:
| Kenmerk | Waarde | Samengevat |
|---|---|---|
| open | open | Standaard is niet open. |
| id | waarde | Biedt een unieke identificatie. |
| klasse | klassenamen | Wijst klassenamen toe aan het element. |
| stijl | CSS-waarden | Wijst CSS-stijlen toe aan het element. |
Dus wat zijn de beperkingen? Er is altijd een addertje onder het gras, nietwaar?
Geen ondersteuning voor Internet Explorer
Deze accordeon met alleen HTML5 werkt in geen enkele versie van Internet Explorer. Als u IE11 moet ondersteunen, moet u een andere fallback-oplossing gebruiken met JQuery. Alle andere browsers ondersteunen en .
Geen aangepaste animaties of overgangen
Hoewel u het uiterlijk kunt wijzigen en stylen (zoals hierboven weergegeven), kunt u geen tekst onthullende animaties of overgangen maken. Als je dat wilt doen, heb je een andere CSS/JSS-accordeonoplossing nodig.
Schermlezers en toegankelijkheid
Dit is inheems HTML5 en het *moet* toegankelijk zijn, maar er is vastgesteld dat de daadwerkelijke geopenbaarde tekst niet altijd correct wordt aangekondigd door een schermlezer.
Referenties:
