Les accordéons CSS sont largement utilisés pour les menus extensibles et réductibles, les extraits de code, les images, les vidéos, les FAQ, les listes et les extraits d'articles. Vous pouvez facilement les créer en utilisant HTML, CSS et JavaScript (ou jQuery). Créer des accordéons CSS uniquement est une tâche un peu difficile, mais c'est très utile dans les environnements JavaScript désactivés.

Dans ce guide, vous apprendrez une approche étape par étape pour créer un accordéon CSS uniquement.

Construire un accordéon de base à l'aide de HTML uniquement

Si votre priorité est de créer un accordéon accessible en HTML, le et les balises sont la voie à suivre. Peu importe le langage de programmation que vous utilisez, l'accordéon uniquement HTML restera intact. Créer un taguez en tant que parent et entrez la question dans un étiqueter. Écrivez une réponse descriptive dans un étiqueter. Itérer le processus pour un certain nombre de FAQ.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam empedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor !





instagram viewer







FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates conséquature. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos !

Styliser l'accordéon

Vous pouvez styliser l'accordéon en ajustant le Couleur de l'arrière plan, rayon-frontière, marge, rembourrage, etc.

corps {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genève, Verdana, sans-serif;
 largeur maximale: 30 rem ;
 marge: 1.5rem automatique ;
}
sommaire {
 font-weight: 600 ;
 couleur: rvb (255, 255, 255) ;
 couleur d'arrière-plan: rgb (7, 185, 255) ;
 rembourrage: 1,2 rem ;
 marge inférieure: 1.2rem ;
 rayon de bordure: 0,5 rem ;
 curseur: pointeur ;
}

Sortir:

La seule limitation est que vous n'aurez pas le contrôle sur chaque partie du code. La structure HTML peut être modifiée, mais vous ne pouvez pas créer un accordéon personnalisé. Par conséquent, créons une section FAQ personnalisée à l'aide de CSS avancé.

Créez votre section FAQ personnalisée

Il existe deux méthodes populaires pour créer un accordéon personnalisé uniquement en CSS. Vous pouvez utiliser des cases à cocher ou des boutons radio; nous allons expliquer les deux méthodes.

Utilisation de la méthode de la case à cocher

La méthode de la case à cocher utilise case à cocher comme type d'entrée. Chaque fois qu'un utilisateur sélectionne un onglet, il coche la case et il s'ouvre. Vous pouvez ouvrir plusieurs onglets simultanément à l'aide de la méthode de la case à cocher, de la même manière que vous pouvez cocher plus d'une case à cocher dans un formulaire HTML.

HTML

Accordéon CSS uniquement personnalisé (FAQ)

Utilisation de la méthode Checkbox






Comment créer un accordéon personnalisé en utilisant uniquement CSS ?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Comment changer la hauteur des pseudo-éléments ?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incident
 reprehenderit facere ex hic ipsa odit in! Eveniet.

CSS général

Appliquez le CSS de base au corps.

corps {
 couleur: 502c2c ;
 arrière-plan: #f1edec ;
 rembourrage: 1,2 rem ;
 famille de polices: 'Segoe UI', Tahoma, Genève, Verdana, sans-serif ;
 largeur maximale: 45 rem ;
 marge: 0 automatique ;
 taille de police: 1.2rem ;
}

Styliser l'accordéon

Tout d'abord, masquez les cases à cocher en modifiant l'entrée.

/* Cacher les cases à cocher ou le bouton radio*/
saisir {
 position: absolue ;
 opacité: 0 ;
 indice z: -1 ;
}

Maintenant, stylisez l'accordéon. Vous pouvez ajouter un ::après pseudo-élément pour le + signe. Vous pouvez vous référer à un Tableau de référence des entités de caractères et utilisez n'importe quel Calculatrice de conversion d'entité pour trouver la valeur CSS d'une valeur numérique. Ici, la valeur CSS de + est \002B.

/* Styles accordéon */
.FAQ {
 couleur: #ffe3e3 ;
 marge inférieure: 3rem ;
}
.faq-label {
 taille de la police: 1.5rem ;
 affichage: flexible ;
 align-items: center;
 justifier-contenu: espace-entre ;
 rembourrage: 1em ;
 arrière-plan: #b61818 ;
 font-weight: gras ;
 curseur: pointeur ;
 sélection par l'utilisateur: aucun ;
}
.faq-label:: après {
 contenu: '\002B' ;
 rembourrage: 0,51 rem ;
 transformation: échelle (1.8) ;
 text-align: centre ;
 transition: toutes les 0,35 s ;
}
.faq-contenu {
 hauteur max: 0 ;
 rembourrage: 0 1em ;
 couleur: #2c3e50 ;
 fond: blanc ;
 transition: toutes les 0,35 s ;
 affichage: aucun ;
}

Maintenant, ajoutons des fonctionnalités à l'accordéon en utilisant sélecteurs adjacents et d'attributs. Ici, \2013 est la valeur CSS pour –, la valeur numérique représentant –.

entrée: cochée + .faq-label {
 arrière-plan: #8f1414 ;
}
input: coché + .faq-label:: après {
 contenu: '\2013' ;
 transformation: échelle (1.5) ;
}
entrée: vérifié ~ .faq-content {
 hauteur maximale: 100 vh ;
 rembourrage: 1em ;
 bloc de visualisation;
 transition: toutes les 0,35 s ;
}

Sortir:

Utilisation de la méthode du bouton radio

La méthode du bouton radio a un type d'entrée défini sur radio. Chaque fois que l'utilisateur clique sur un onglet, le bouton radio masqué correspondant à cet onglet s'ouvre. Lorsque vous cliquez sur l'onglet suivant, l'onglet précédent se ferme instantanément. Vous ne pouvez ouvrir qu'un seul onglet à la fois en utilisant la méthode du bouton radio.

HTML

Accordéon CSS uniquement personnalisé (FAQ)

Utilisation de la méthode du bouton radio






Comment créer un accordéon en utilisant la méthode du bouton radio ?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Comment créer un accordéon personnalisé en utilisant uniquement CSS ?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Que signifie le style accordéon ?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Vel, non !









Tout fermer ×

CSS

Copiez le CSS ci-dessus de la méthode Checkbox car les deux méthodes diffèrent uniquement du point de vue structurel. Vous remarquerez peut-être qu'il y a un onglet ouvert tout le temps. Cela se produit parce que vous ne pouvez pas décocher les boutons radio comme les cases à cocher. Pour ce faire, ajoutez le code CSS ci-dessous à un bouton radio "Fermer tout" sans aucune description.

/* Tout fermer */
.faq-label {
 position: relative ;
}
.faq-fermer {
 affichage: bloc en ligne ;
 rembourrage: 1rem ;
 taille de police: 1rem ;
 arrière-plan: #b61818 ;
 curseur: pointeur ;
 position: absolue ;
 à gauche: 64 rem ;
}

Sortir:

Continuez à expérimenter et ajoutez des animations

Il y a une logique simple derrière les accordéons: lorsque vous cliquez sur un menu, son contenu caché apparaîtra. Puisque vous savez maintenant créer un accordéon, il est grand temps de mettre en œuvre et d'expérimenter votre apprentissage. Vous pouvez créer des accordéons horizontaux pour améliorer le design, en particulier lors de l'affichage d'images. Expérimentez avec le code en ajustant l'effet de transition à l'aide d'animations d'images clés.

Naïf Mourya (16 articles publiés)

Naincy se spécialise dans la création de sites Web hautement réactifs et d'une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.

Plus de Naincy Mourya