Visste du att det finns en inbyggd HTML5-lösning för att mycket enkelt skapa en dragspelsläs mer/mindre-knapp för att dölja och avslöja innehåll med INGET JavaScript eller CSS. Läs vidare för att ta reda på hur.
Smakämnen och HTML5-taggar är officiellt en avslöjande widgetelement, Men den parad med HTML5-taggar ger dig en dragspel med endast HTML.
Betydelse ingen JS ELLER CSS behövs. Hur coolt är inte det!
Här är ett exempel som visar ett enkelt element med a och .
Här är koden:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>och så här kommer det se ut:
Läs mer
Detta är ett inbyggt HTML5-dragspel för att dölja och avslöja innehåll. Ganska coolt, eller hur?
Hur fungerar det? Smakämnen taggen fungerar som omslag för ett element som kan öppnas eller stängas. Användaren måste klicka på etiketten som är tagg för att öppna eller stänga elementet.
Hur är det med styling och beteende?
Stilar
Du kan använda CSS-stil för att anpassa utseendet på avslöjningstextrutan. Nedanstående ger en gränssnittsstil med flikar:
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 visas markören som en pil, men om du vill att den ska vara en pekande hand använd då detta istället:
details {
cursor: pointer;
}beteenden
Att sätta beteenden är väldigt begränsat, det finns egentligen bara en sak du kan göra och det är att göra den avslöjade texten öppen som standard.
För att starta dragspelet i öppet tillstånd, lägg till Boolean öppet attribut till märka:
<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 mer
Detta är ett inbyggt HTML5-dragspel för att dölja och avslöja innehåll. Ganska coolt, eller hur?
Vilka attribut kan jag använda?
Nedanstående attribut kan användas för märka:
| Attribut | Värde | Sammanfattning |
|---|---|---|
| öppet | öppet | Standard är inte öppen. |
| id | värde | Ger en unik identifierare. |
| klass | klassnamn | Tilldelar klassnamn till elementet. |
| stil | CSS-värden | Tilldelar CSS-stilar till elementet. |
Så vilka är begränsningarna? Det finns alltid en hake, eller hur?
Inget stöd för Internet Explorer
Detta dragspel med endast HTML5 fungerar inte i någon version av Internet Explorer. Om du måste ha det stöd för IE11 måste du använda en annan reservlösning med JQuery. Alla andra webbläsare stöder och .
Inga anpassade animationer eller övergångar
Även om du kan ändra och stila utseendet (som visas ovan), kommer du inte att kunna göra någon textavslöjande animering eller övergångar. Om du vill göra det behöver du en annan CSS/JSS-dragspelslösning.
Skärmläsare och tillgänglighet
Detta är infödd HTML5 och den *borde vara* tillgänglig men har upptäckt att den faktiska avslöjade texten inte alltid meddelas korrekt av en skärmläsare.
Referenser: