Vidste du, at der er en indbygget HTML5-løsning til meget nemt at oprette en harmonika læs mere/mindre knap til at skjule og afsløre indhold med INGEN JavaScript eller CSS. Læs videre for at finde ud af hvordan.
, HTML5-tags er officielt en oplysningswidget-element, Men parret med HTML5-tags vil give dig en ren HTML-kun harmonika.
Betydning ingen JS ELLER CSS er nødvendig. Hvor er det fedt!
Her er et eksempel, der viser et simpelt element med en , .
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 sådan vil det se ud:
Læs mere
Dette er en indbygget HTML5 harmonika til at skjule og afsløre indhold. Ret sejt, ikke?
Hvordan virker det? tag fungerer som en indpakning for et element, der kan åbnes eller lukkes. Brugeren skal klikke på etiketten, der er tag for at åbne eller lukke elementet.
Hvad med styling og adfærd?
Styles
Du kan anvende CSS-styling for at tilpasse udseendet af afsløringstekstboksen. Nedenstående giver en fanebaseret grænsefladestil:
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 have den til at være en pegende hånd brug i stedet denne:
details {
cursor: pointer;
}Behaviors
At indstille adfærd er meget begrænset, der er egentlig kun én ting du kan gøre, og det er at lave den afslørede tekst åben som standard.
For at starte harmonikaen i dens åbne tilstand skal du tilføje boolsk åbent attribut til tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Læs mere
Dette er en indbygget HTML5 harmonika til at skjule og afsløre indhold. Ret sejt, ikke?
Hvilke egenskaber kan jeg bruge?
Nedenstående attributter kan bruges til tag:
| Attribut | Værdi | Resumé |
|---|---|---|
| åbent | åbent | Standard er ikke åben. |
| id | værdi | Giver en unik identifikator. |
| klasse | klasse navne | Tildeler klassenavne til elementet. |
| stil | CSS-værdier | Tildeler CSS-stile til elementet. |
Så hvad er begrænsningerne? Der er altid en fangst, ikke?
Ingen understøttelse af Internet Explorer
Denne harmonika, der kun er HTML5, fungerer ikke i nogen version af Internet Explorer. Hvis du skal have den til at understøtte IE11, bliver du nødt til at bruge en anden fallback-løsning ved hjælp af JQuery. Alle andre browsere understøtter , .
Ingen tilpassede animationer eller overgange
Mens du kan ændre og style udseendet (som vist ovenfor), vil du ikke være i stand til at afsløre tekstanimationer eller overgange. Hvis du vil gøre det, skal du bruge en anden CSS/JSS harmonikaløsning.
Skærmlæsere og tilgængelighed
Dette er indfødt HTML5 og det *burde* være tilgængeligt, men det har vist sig, at den faktiske afslørede tekst ikke altid annonceres korrekt af en skærmlæser.
Referencer:
