Étiquette : collapse

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

Si toi aussi tu travailles encore avec Bootstrap en 2018 (ou +), tu t’es forcément retrouvé face à ce problème qui existait dans la version 3 de Bootstrap et est toujours présent dans la version 4: la classe collapsed sur le lien ou le bouton qui va permettre d’afficher/masquer des éléments n’apparaît qu’après un premier affichage/masquage de ces dits éléments.

Fais le test sur les exemples qu’on retrouve dans les docs officielles : https://getbootstrap.com/docs/3.3/javascript/#collapse ou https://getbootstrap.com/docs/4.0/components/collapse/.

Il est d’ailleurs étonnant que personne ne leur ait jamais remonté ce bug… Peut-être parce que plus personne n’utilise Bootstrap en 2018 (ou +).

Solution #1

Pour solutionner notre problème, il suffit de mettre un setTimeout javaScript quelque part dans tes sources pour délayer l’ajout dans le DOM de la classe collapsed à l’affichage de la page. Oui: c’est sâle. Oui: c’est une vilaine câle en bois. Non: on n’aurait pas pu mettre la classe dans le code HTML car le code natif Bootstrap te la supprime illico. Oui: tu peux peut-être passer par les events proposés par l’api pour faire ça mieux, mais ça veut dire que tu ne peux pas utiliser les data-attributes pour initier ton collapse.

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

Source (partielle) : Bootstrap Close collapse on outside click snippet – Bootply.

Une partie de la solution a été trouvée en tapant les mots-clés suivants dans Google : bootstrap collapse affix close when click outside.

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Utile lorsque la zone ouverte contient des éléments d’action comme des liens, des cases à cocher, etc… On ne voudrait pas refermer la zone lorsque l’utilisateur est en-train de remplir un formulaire par exemple.

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

  1. .nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
  2. .navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

  • class= »link collapsed »
  • role= »button »
  • data-toggle= »collapse »
  • href= »${descendantUrl} »
  • aria-expanded= »false »
  • aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

  • data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
  • data-desktop-target= »${descendantUrl} »

Exemple finalisé :

Sur l’élément à afficher/masquer :

  • class= »level${parent/getChildrenLevel} collapse »
  • id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

Vue Desktop, second niveau fermé :

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

[CSS] [Bootstrap] Correction d’un bug de la fonctionnalité Collapse sous la v3

Le bug a été officiellement corrigé par l’équipe de développement de Bootstrap. Rendez-vous sur leur page GitHub pour récupérer la dernière version.

La fonctionnalité Collapse de Bootstrap v3 peut-être utilisée dans le cadre d’un Design Responsive pour cacher, en mode de visualisation Mobile, une navigation ou un champ de recherche et afficher un bouton Voir/Masquer.

Dans une version Custom de Bootstrap v3 générée le 05/09/2013, un bug dans la CSS source empêche le masquage des éléments en mode Mobile. Pour remédier à ce souci (jusqu’à ce qu’il soit corrigé par l’équipe en charge de développer le framework), charger le code CSS ci-dessous immédiatement après bootstrap.css ou bootstrap.min.css :

Ce code provient d’une version antérieure des sources CSS de Bootstrap.