J'ai obtenu une rangée avec un accordéon et deux cartes (qui peuvent être des images ou n'importe quoi d'autre) comme sur cette photo :
J'utilise la classe h-100 de bootstrap pour faire en sorte que toutes les cartes d'une rangée aient toujours la même hauteur.
Mais je n'arrive pas à trouver comment le faire avec des accordéons.
J'ai ajouté un peu de JQuery, de sorte que mon accordéon a toujours une carte étendue et je veux que le corps de la carte utilise autant de hauteur qu'il peut obtenir.
Comment puis-je y parvenir ?
<div class="container">
<div class="row">
<div class="col d-flex flex-column">
<div class="accordion accordion-always-open h-100" id="accordionExample">
<div class="card align-self-stretch">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show align-self-stretch" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body h-100">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<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.
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex flex-column">
<div class="card border-success mb-3 h-100" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Big card</h5>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
<p class="card-text">I want the accordion next to this card to have the same height as this card</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
</div>
<div class="col d-flex flex-column">
<div class="card border-success mb-3 h-100" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Less content</h5>
<p class="card-text">This card has same size but has less content</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
</div>
</div>
</div>
<script>
$('.accordion-always-open').on('show.bs.collapse', function () {
$(this).data('isShowing', true);
});
$('.accordion-always-open').on('hide.bs.collapse', function (event) {
if (!$(this).data('isShowing')) {
event.preventDefault();
}
$(this).data('isShowing', false);
});
</script>
