Bootstrap 4 - accordéon aligné horizontalement

Question

J'ai cherché un moyen de construire une accordéon en Bootstrap 4 qui dispose chaque panneau de gauche à droite, au lieu de haut en bas. En outre, j'essaie de trouver une solution qui permette de faire pivoter les en-têtes cliquables de 90 degrés et de les placer à gauche du contenu.

J'ai vu ce message il y a un certain temps :

Twitter Bootstrap Collapse plugin Direction-Horizontal au lieu de Vertical

Mais aucune de ces solutions ne semble fonctionner, ou alors pour un accordéon. Idéalement, l'accordéon devrait remplir le width du conteneur et maintenir cette width . J'ai fait une maquette de ce à quoi il ressemblerait dans deux états :

État 1

État deux

Answer 1

Il est possible d'y parvenir avec quelques ajustements, mais lisez attentivement les exigences avant de les mettre en œuvre :

En tenant compte du fait que vous utilisez Bootstrap 4 et la version minimale d'Internet Explorer est IE10 vous ne devriez pas avoir de problèmes à utiliser Transformations CSS . Mais il est important de noter que dans cette bidouillé solution que j'utilise événements de pointeurs Il vous faut donc au moins Internet Explorer 11 si vous voulez éviter de fermer un élément déjà ouvert en cliquant dessus.

Pour cette solution, il doit y avoir un élément ouvert unique au début (cet élément ouvert est utilisé pour obtenir sa largeur et l'appliquer à tous les contenus repliables). De même, la hauteur de l'accordéon est mise à jour au début, donc, comme une largeur et une hauteur fixes sont appliquées aux éléments, si vous voulez être réactif, vous devez mettre à jour ces tailles à chaque redimensionnement de la fenêtre. Il faut également tenir compte du fait que je n'utilise aucun préfixe de fournisseur CSS dans l'exemple.

---

Codepen :

https://codepen.io/elchininet/pen/wLMxpB

---

Extrait :

var horizontalAccordions = $(".accordion.width");

horizontalAccordions.each(function() {
  var accordion = $(this);
  var collapse = accordion.find(".collapse");
  var bodies = collapse.find("> *");
  accordion.height(accordion.height());  
  bodies.width(bodies.eq(0).width());
  collapse.not(".show").each(function() {
    $(this).parent().find("[data-toggle='collapse']").addClass("collapsed");
  });
});

.accordion.width {
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.accordion.width .card {
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 1;
  min-width: min-content;
}

.accordion.width .card .card-header {
  cursor: pointer;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.accordion.width .card .card-header:not(.collapsed) {
  pointer-events: none;
}

.collapsing.width {
  transition: width 0.35s ease;
  height: auto;
  width: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="accordion width" id="accordionHorizontalExample">
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseOne">
      Collapsible Group Item 1
    </div>
    <div id="collapseOne" class="collapse show width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseTwo">
      Collapsible Group Item 2
    </div>
    <div id="collapseTwo" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseThree">
      Collapsible Group Item 3
    </div>
    <div id="collapseThree" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
</div>