Étiquette : collapse

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

24/04/2018 / admin

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.

    <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>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

</div>

.address-extra-info {
  &-trigger {
    .btn-naked {
      &.collapsed {
        .hide-extra-fields {
          display: none;
        }
      }
      &:not(.collapsed) {
        .show-extra-fields {
          display: none;
        }
      }
    }
  }
}

.address-extra-info {

&-trigger {

.btn-naked {

&.collapsed {

.hide-extra-fields {

display: none;

}

&:not(.collapsed) {

.show-extra-fields {

display: none;

}

  setTimeout(function(){
    $('#triggerAddressExtraInfo').addClass('collapsed');
  }, 500);

setTimeout(function(){

$('#triggerAddressExtraInfo').addClass('collapsed');

}, 500);

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

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

27/05/2016 / admin

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

L’astuce consiste à :

Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
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).
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).

<div class="accordion" id="accordion">
  <!--Article 1-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 2-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 3-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Collapsible Group Item #1

</a>

</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</div>

</div>

Collapsible Group Item #3

</a>

</div>

</div>

$('a[data-toggle="collapse"]').on('click',function(){
  var id=$(this).attr('href');
  if($(id).hasClass('in'))
  {
    $(id).collapse('hide');
  }
  
  else{
    $(id).collapse('show');
  }
});

$('a[data-toggle="collapse"]').on('click',function(){

var id=$(this).attr('href');

if($(id).hasClass('in'))

{

$(id).collapse('hide');

}

else{

$(id).collapse('show');

}

});

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

11/02/2016 / admin

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.

$(document).on('click',function(){
  $('.collapse').collapse('hide');
});

$(document).on('click',function(){

$('.collapse').collapse('hide');

});

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.

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){
  event.stopPropagation();
});

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){

event.stopPropagation();

});

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

10/02/2016 / admin

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 :

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

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 :

.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')
.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:

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</ul>

</div>

</div>

</nav>

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

[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.

16/12/2015 / admin

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é :

<a tal:condition="descendantUrl"
  class="link collapsed"
  role="button"
  data-toggle="collapse"
  data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"
  data-desktop-target="${descendantUrl}"
  href="${descendantUrl}"
  aria-expanded="false"
  aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

<a tal:condition="descendantUrl"

class="link collapsed"

role="button"

data-toggle="collapse"

data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"

data-desktop-target="${descendantUrl}"

href="${descendantUrl}"

aria-expanded="false"

aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

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

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

Exemple finalisé :

<ul class="level${parent/getChildrenLevel} collapse"
  tal:define="columns php:array_chunk(children, columnItemsLimit)"
  tal:repeat="column columns"
  id="collapseShelfSubMenuLevel2${repeat/entry/index}">

<ul class="level${parent/getChildrenLevel} collapse"

tal:define="columns php:array_chunk(children, columnItemsLimit)"

tal:repeat="column columns"

id="collapseShelfSubMenuLevel2${repeat/entry/index}">

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 :

(function($){
  $(document).ready(function(){
    enquire.register("screen and (max-width: 767px)", {
      match : function() {
        $('.main-menu > .level1 > li > a').on('click', function(e){
          $(this).attr('href', '#' + $(this).attr('data-mobile-target'));
        });
      },
      unmatch : function() {
        $('.main-menu > .level1 > li > a').each(function(e){
          $(this).attr('href', $(this).attr('data-desktop-target'));
        });
      }
    });
  });
})(jQuery);

(function($){

$(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

$('.main-menu > .level1 > li > a').on('click', function(e){

$(this).attr('href', '#' + $(this).attr('data-mobile-target'));

});

unmatch : function() {

$('.main-menu > .level1 > li > a').each(function(e){

$(this).attr('href', $(this).attr('data-desktop-target'));

});

}

});

})(jQuery);

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

Vue Mobile, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li>
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse" aria-expanded="false" style="height: 0px;">

<li>

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

Vue Desktop, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li class=" store-menu no-highlight">
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse">

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

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

06/09/2013 / admin

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 :

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}

@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}

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

Articles récents

Catégories

Archives

Méta

Étiquette : collapse

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

Solution #1

Solution #2 (la meilleure)

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

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

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

[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.

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

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

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

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

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

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