Saviez-vous qu'il existe une solution HTML5 native pour créer très facilement un bouton lire plus/moins en accordéon pour cacher et révéler du contenu avec AUCUN JavaScript ou CSS. Lisez la suite pour savoir comment.
La et Les balises HTML5 sont officiellement un élément de widget de divulgation, Mais l' jumelé avec Les balises HTML5 vous donneront une accordéon pur HTML uniquement.
Sens pas de JS ni de CSS est nécessaire. À quel point cela est cool!
Voici un exemple montrant un élément simple avec un et .
Voici le code:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>et voici à quoi cela ressemblera:
En savoir plus
Il s'agit d'un accordéon HTML5 natif pour masquer et révéler le contenu. Plutôt cool, non ?
Comment cela fonctionne ? La tag sert d'enveloppe pour un élément qui peut être ouvert ou fermé. L'utilisateur doit cliquer sur l'étiquette qui est le balise pour ouvrir ou fermer l'élément.
Qu'en est-il du style et du comportement ?
Styles
Vous pouvez appliquer un style CSS pour personnaliser l'apparence de la zone de texte de révélation. Le ci-dessous donne un style d'interface à onglets :
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;
}Par défaut, le curseur apparaît comme une flèche, mais si vous voulez qu'il soit un pointer la main utilisez plutôt ceci:
details {
cursor: pointer;
}Comportements
La configuration des comportements est très limitée, il n'y a vraiment qu'une seule chose que vous pouvez faire et c'est de faire apparaître le texte ouvert par défaut.
Pour démarrer l'accordéon dans son état ouvert, ajoutez le booléen ouvert attribuer à la tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>En savoir plus
Il s'agit d'un accordéon HTML5 natif pour masquer et révéler le contenu. Plutôt cool, non ?
Quels attributs puis-je utiliser ?
Les attributs ci-dessous peuvent être utilisés pour le tag:
| Attribut | Valeur | Résumé |
|---|---|---|
| ouvert | ouvert | La valeur par défaut est pas ouverte. |
| id | Plus-value | Fournit un identifiant unique. |
| classe | noms de classe | Attribue des noms de classe à l'élément. |
| Catégorie | Valeurs CSS | Attribue des styles CSS à l'élément. |
Quelles sont donc les limites ? Il y a toujours un hic, n'est-ce pas ?
Pas de support pour Internet Explorer
Cet accordéon uniquement HTML5 ne fonctionnera dans aucune version d'Internet Explorer. Si vous devez le faire prendre en charge IE11, vous devrez utiliser une solution de secours différente à l'aide de JQuery. Tous les autres navigateurs prennent en charge et .
Pas d'animations ou de transitions personnalisées
Bien que vous puissiez modifier et styliser l'apparence (comme indiqué ci-dessus), vous ne pourrez pas faire d'animations ou de transitions de révélation de texte. Si vous voulez faire cela, vous aurez besoin d'une autre solution d'accordéon CSS/JSS.
Lecteurs d'écran et accessibilité
C'est natif HTML5 et il * devrait être * accessible, mais il a été constaté que le texte réellement révélé n'est pas toujours annoncé correctement par un lecteur d'écran.
Références:
