Comment créer un accordéon à l'aide de bootstrap 5
Lisez l'article ci-dessous pour apprendre à créer un accordéon à l'aide de bootstrap 5.
Comment créer un accordéon à l'aide de bootstrap 5
Dans l'exemple ci-dessous, nous allons montrer comment vous pouvez créer un accordéon à l'aide de bootstrap 5.
Html
La première étape pour faire un accordéon est de faire un conteneur de div parent et de lui attribuer un identifiant. Ici, nous lui avons attribué un ID étiqueté «accordéon». Le but de ce conteneur de div parent est de cacher tous les autres éléments pliables lorsque l'un des éléments pliables est affiché.
Html
Maison
Un paragraphe.
Pour le bien de cet exemple, nous utiliserons le composant de la carte pour générer un accordéon. Par conséquent, dans le code ci-dessus, nous faisons une carte en lui attribuant le .carte classe à un conteneur div. Ensuite, nous faisons l'on-tête de la carte en utilisant le .cadré classe et une balise d'ancrage qui cache / affiche le contenu a été imbriqué à l'intérieur de l'en-tête et connecté à la div pliable à l'aide de l'ID.
Enfin, une div a été rendue pliable en utilisant le .effondrement classe et le corps de la carte était imbriqué à l'intérieur du récipient pliable. Noter que data-bs-parent = "# id" Fait tous les autres collapsbles à se cacher sous le conteneur Parent Div lorsque l'une des collapsbles est affichée.
Html
À propos
Un paragraphe.
Une autre carte a été générée en utilisant la même technique que celle utilisée pour la première carte. La seule différence étant que l'ID utilisé pour connecter la balise d'ancrage au div pliable est différent de celui utilisé pour la première carte.
Html
Prestations de service
Un paragraphe.
La même approche a été utilisée pour fabriquer une autre carte pliable ayant un ID différent qui relie la balise d'ancrage avec le conteneur DIV pliable.
Sortir
Un accordéon a été généré avec succès.
Note: Si vous excluez l'attribut Data-BS-Parent, les éléments de l'accordéon restent ouverts pendant que d'autres éléments sont ouverts.
Suivant la technique illustrée ci-dessus, vous pouvez facilement générer un accordéon à l'aide de bootstrap 5.
Conclusion
Afin de faire un accordéon, vous devez faire un élément tel qu'un conteneur div pliable en utilisant le .effondrement classe et nid de tels éléments pliables à l'intérieur d'un élément parent. L'article ci-dessus utilise une carte pour générer un accordéon. Un total de trois cartes ayant un en-tête et un corps ont été générés et rendus pliables. Chacune des cartes était liée à une balise d'ancrage qui a été utilisée pour masquer / afficher le contenu placé à l'intérieur de chaque carte pliable. De plus, le data-bs-parent = "# id" a été utilisé pour masquer toutes les autres collapsbles sous l'élément parent pendant que l'on est affiché.