How can I collapse a language switch without JS? - html

Question

So I made a working concept based on Bootstrap 5.2.3 where I can switch languages inside a card element with the click on an icon based on the multi-collapse feature (no JavaScript). The flag, the title and the contents switches from NL to EN and back when you click on the flag
My main issue: when you switch from one language to another the switch feels quite clunky: you can see the new header appearing and the old one disappearing. Is there a bootstrap command/way to make that switch smoother?
https://jsfiddle.net/17vugqtz/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/css/flag-icons.min.css">
<div class="col">
<div class="card mb-4 rounded-3">
<div class="card-header" id="PageSummary">
<b class="textNL collapse multi-collapse show" aria-expanded="true">Samenvatting</b>
<b class="textEN collapse multi-collapse" aria-expanded="false">Summary</b>
<a id="flagEN" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="true">
<span class="collapse multi-collapse show fi-us"> EN </span>
</a>
<a id="flagNL" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="false">
<span class="collapse multi-collapse fi-nl"> NL </span>
</a>
</div>
<div class="card-body">
<div class="collapse multi-collapse show" id="collNL" aria-expanded="true">NL tekst komt hier.
</div>
<div class="collapse multi-collapse" id="collEN" aria-expanded="false">EN text will go here.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Answer 1

If you want no animation
Unfortunately you cannot use data-bs-animation="false" here; it's not build-in for Bootstrap's collapse component. So you need a CSS solution:
.multi-collapse {
transition: none;
}
https://jsfiddle.net/L61dq7u5/
If you want a smoother transition
Try the CSS below.
.multi-collapse {
opacity: 0;
transition: opacity 0.35s ease;
visibility: hidden;
}
.multi-collapse.show {
visibility: visible;
transition-delay: 0.05s;
opacity: 1;
}
https://jsfiddle.net/23y19x0q/