Comment masquer / afficher le contenu en utilisant la classe d'effondrement dans bootstrap 5

Un composant pliable est très essentiel lorsque vous souhaitez afficher une énorme quantité de contenu sur une seule page Web. L'avantage de l'utilisation d'un pliable est qu'il vous empêche d'encombrement votre page Web avec beaucoup de contenu et de rehausser l'expérience utilisateur.

Un pliable vous permet de montrer et de masquer le contenu à l'aide d'éléments HTML. Ici, nous avons discuté de la façon dont vous pouvez masquer ou afficher du contenu en utilisant la classe d'effondrement dans Bootstrap 5.

Comment masquer / afficher le contenu en utilisant la classe d'effondrement dans bootstrap 5

Comme déjà mentionné, un plible permet de «vous afficher et masquer un énorme contenu sur une page Web. Si vous vous demandez comment un pliable est créé et utilisé pour masquer / afficher le contenu à l'aide de Bootstrap 5, consultez les sections à venir.

Comment masquer le contenu à l'aide d'un élément

Une façon de créer un pliable consiste à utiliser l'élément.

Html

C'est un titre

C'est le premier paragraphe.

C'est le deuxième paragraphe.

C'est le troisième paragraphe.

Dans le code ci-dessus, le conteneur div a été rendu pliable en lui attribuant le .classe d'effondrement. Par la suite, un contenu a été placé à l'intérieur de cette div qui sera cachée ou montrée en utilisant le bouton pliable.

L'élément est utilisé pour masquer / afficher le contenu à l'intérieur du div pliable en attribuant la données-bs-toggle = «s'effondrer». De plus, Data-Bs-Target = «# id» est utilisé pour relier le bouton au conteneur div pliable.

Sortir

C'est ainsi que vous pouvez masquer / afficher du contenu à l'aide de boutons pliables.

Comment masquer le contenu à l'aide d'une balise

Une autre façon de générer un pliable est d'utiliser la balise. Ici, nous avons montré cette méthode dans l'extrait de code ci-dessous.

Html

Le reste du code sera le même que ci-dessus avec la seule différence que nous avons utilisé un Tag à l'intérieur d'un élément et pour contrôler le contenu, nous avons attribué le data-bs-toggle = "effondrement" à la balise d'ancrage et à l'ID qui connecte cette balise au conteneur DIV pliable a été affecté à l'attribut HREF.

Sortir

Un pliable a été réalisé avec succès en utilisant la balise d'ancrage.

Comment utiliser le .classe de spectacle

Par défaut, le contenu à l'intérieur d'un pliable sera caché et affichera quand le bouton ou le lien est cliqué. Mais si vous souhaitez que votre contenu soit affiché par défaut et le masquez après que le bouton / lien soit cliqué, utilisez le .classe de spectacle.

Html

Ici, le conteneur div a été attribué le .montrer classe avec .classe d'effondrement. Cela modifiera le comportement par défaut du pliable et le contenu sera affiché par défaut et se cachera une fois le lien cliqué.

Sortir

Le .La classe Show fonctionne correctement.

Conclusion

Dans le but de cacher ou de montrer du contenu en utilisant la classe d'effondrement data-bs-toggle = "effondrement" à un élément ou un étiqueter et lier ces éléments à l'élément pliable en utilisant data-bs-target = "# id" En cas de bouton et href = "# id" en cas de lien. Le contenu est caché dans un pliable par défaut, cependant, si vous souhaitez modifier ce comportement par défaut, utilisez le .classe de spectacle.