Visste du at det er en innebygd HTML5-løsning for veldig enkelt å lage en trekkspill les mer/mindre-knapp for å skjule og avsløre innhold med INGEN JavaScript eller CSS. Les videre for å finne ut hvordan.
De og HTML5-tagger er offisielt en widgetelement for avsløring, Men sammen med HTML5-tagger vil gi deg en ren HTML-bare trekkspill.
Betydning ingen JS ELLER CSS trengs. Hvor kult er det!
Her er et eksempel som viser et enkelt element med en og .
Her er koden:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>og slik vil det se ut:
Les mer
Dette er et innebygd HTML5-trekkspill for å skjule og avsløre innhold. Ganske kult, ikke sant?
Hvordan virker det? De tag fungerer som omslag for et element som kan åpnes eller lukkes. Brukeren må klikke på etiketten som er tag for å åpne eller lukke elementet.
Hva med styling og oppførsel?
Stiler
Du kan bruke CSS-styling for å tilpasse utseendet til avsløringstekstboksen. Nedenfor gir en fanebasert grensesnittstil:
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;
}Som standard vises markøren som en pil, men hvis du vil at den skal være en pekende hånd bruk i stedet denne:
details {
cursor: pointer;
}Atferd
Å sette atferd er svært begrenset, det er egentlig bare én ting du kan gjøre, og det er å lage den avslørte teksten åpen som standard.
For å starte trekkspillet i åpen tilstand, legg til boolsk åpen attributt til stikkord:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Les mer
Dette er et innebygd HTML5-trekkspill for å skjule og avsløre innhold. Ganske kult, ikke sant?
Hvilke attributter kan jeg bruke?
Attributtene nedenfor kan brukes til stikkord:
| Egenskap | Verdi | Oppsummering |
|---|---|---|
| åpen | åpen | Standard er ikke åpen. |
| id | verdi | Gir en unik identifikator. |
| klasse | klassenavn | Tildeler klassenavn til elementet. |
| stil | CSS-verdier | Tildeler CSS-stiler til elementet. |
Så hva er begrensningene? Det er alltid en hake, er det ikke?
Ingen støtte for Internet Explorer
Dette HTML5-trekkspillet fungerer ikke i noen versjoner av Internet Explorer. Hvis du må ha støtte for IE11, må du bruke en annen reserveløsning ved å bruke JQuery. Alle andre nettlesere støtter og .
Ingen tilpassede animasjoner eller overganger
Selv om du kan endre og style utseendet (som vist ovenfor), vil du ikke kunne gjøre noen tekstavslørende animasjoner eller overganger. Hvis du vil gjøre det, trenger du en annen CSS/JSS-trekkspillløsning.
Skjermlesere og tilgjengelighet
Dette er innfødt HTML5 og den *bør være* tilgjengelig, men det har vist seg at den faktiske avslørte teksten ikke alltid annonseres riktig av en skjermleser.
Referanser:
