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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-group address-extra-info-trigger"> <span class="control-label"> <spring:theme code="address.line2"/> </span> <button id="triggerAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseAddressExtraInfo" aria-expanded="false" aria-controls="collapseAddressExtraInfo"> <span class="show-extra-fields"> <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span> <span class="hide-extra-fields"> <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span> </button> </div> <div class="collapse address-extra-info-fields" id="collapseAddressExtraInfo"> <p>bla bla bla toto...</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.address-extra-info { &-trigger { .btn-naked { &.collapsed { .hide-extra-fields { display: none; } } &:not(.collapsed) { .show-extra-fields { display: none; } } } } } |
|
1 2 3 |
setTimeout(function(){ $('#triggerAddressExtraInfo').addClass('collapsed'); }, 500); |
Solution #2 (la meilleure)
Il est temps d’abandonner Bootstrap pour Foundation.