Sapevi che esiste una soluzione HTML5 nativa per creare molto facilmente un pulsante leggi di più/meno a fisarmonica per nascondere e rivelare il contenuto con NESSUN JavaScript o CSS. Continua a leggere per scoprire come.
Le e a I tag HTML5 sono ufficialmente a elemento widget di divulgazione, Ma l' accoppiato con I tag HTML5 ti daranno un fisarmonica solo HTML puro.
Significato nessun JS O CSS è necessario. Quant'è fico!
Ecco un esempio che mostra un semplice elemento con a e a .
Ecco il codice:
<details> <summary>Read More</summary> <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p> </details>ed ecco come apparirà:
Scopri di più
Questa è una fisarmonica HTML5 nativa per nascondere e rivelare il contenuto. Abbastanza bello, vero?
Come funziona? Le tag funge da wrapper per un elemento che può essere aperto o chiuso. L'utente deve fare clic sull'etichetta che è il tag per aprire o chiudere l'elemento.
E per quanto riguarda lo stile e il comportamento?
Stili
Puoi applicare lo stile CSS per personalizzare l'aspetto della casella di testo di rivelazione. Quanto segue fornisce uno stile di interfaccia a schede:
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; }Per impostazione predefinita, il cursore appare come una freccia, ma se vuoi che sia a mano che indica invece usa questo:
details { cursor: pointer; }comportamenti
L'impostazione dei comportamenti è molto limitata, c'è davvero solo una cosa che puoi fare ed è creare il testo rivelato aperto per impostazione predefinita.
Per avviare la fisarmonica nel suo stato aperto, aggiungi il booleano aprire attributo a etichetta:
<details open> <summary>Read More</summary> <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p> </details>Scopri di più
Questa è una fisarmonica HTML5 nativa per nascondere e rivelare il contenuto. Abbastanza bello, vero?
Quali attributi posso utilizzare?
Gli attributi seguenti possono essere utilizzati per il etichetta:
| Attributo | Valore | Sommario |
|---|---|---|
| aprire | aprire | L'impostazione predefinita è non aperto. |
| id | APPREZZIAMO | Fornisce un identificatore univoco. |
| classe | nomi di classe | Assegna nomi di classe all'elemento. |
| style | Valori CSS | Assegna stili CSS all'elemento. |
Quindi quali sono i limiti? C'è sempre un problema, non è vero?
Nessun supporto per Internet Explorer
Questa fisarmonica solo HTML5 non funzionerà in nessuna versione di Internet Explorer. Se devi farlo supportare IE11, dovrai utilizzare una soluzione di fallback diversa utilizzando JQuery. Tutti gli altri browser supportano e a .
Nessuna animazione o transizione personalizzata
Mentre puoi modificare e modellare l'aspetto (come mostrato sopra), non sarai in grado di eseguire animazioni o transizioni di rivelazione del testo. Se vuoi farlo avrai bisogno di un'altra soluzione di fisarmonica CSS/JSS.
Screen reader e accessibilità
Questo è nativo HTML5 e *dovrebbe essere* accessibile, ma è stato riscontrato che il testo effettivamente rivelato non è sempre annunciato correttamente da uno screen reader.
Riferimenti: