Connaissez-vous les éléments HTML details et summary ?
Vous devriez.
Pour créer un accordéon sans JavaScript, ce sont vos amis.
Mais il se peut que vous souhaitiez en personnaliser l’apparence.
En utilisant la pseudoclasse ::after sur l’élément summary, vous pouvez ajouter du contenu avec la propriété content.
Et si vous changiez le contenu en fonction de l’état de l’élément details (par exemple, ouvert ou fermé) ?
Appliquez un style différent lorsque l’accordéon est ouvert en utilisant le sélecteur details[open].
Voici la démonstration que j’utilise sur mon blog sur JSFiddle.
Amusez-vous bien !
Crédit : Photo de Gaelle Marcel sur Unsplash.
