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

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/[email protected]/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 >
  <div >
    <div  id="PageSummary">
      <b  aria-expanded="true">Samenvatting</b>
      <b  aria-expanded="false">Summary</b>
      <a id="flagEN"  data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="true">
        <span >&nbsp;EN&nbsp;</span>
      </a>
      <a id="flagNL"  data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="false">
        <span >&nbsp;NL&nbsp;</span>
      </a>
    </div>
    
    <div >
      <div  id="collNL" aria-expanded="true">NL tekst komt hier.
      </div>
      
      <div  id="collEN" aria-expanded="false">EN text will go here.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

CodePudding user response：

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/