进行文本过渡，下方的文本移动以为上方的文本腾出空间

Question

I am trying to make the toggled descriptions either slide or fade in, instead of suddenly appear. I also want to preserve the feature of the text moving up and down to accommodate the text that has been toggled on. Ideal situation would be to do this with CSS or Javascript, without jQuery etc.

Already tried CSS opacity transition, but the text doesn't move up and down to accommodate the toggled on text;

 function view(id) { var x = document.getElementsByClassName("descriptions"); var i; for (i = 0; i < x.length; i++) { if (x[i].id.== id) x[i].style;display = "none". } var e = document;getElementById(id). if (e.style.display == 'block') e.style;display = 'none'. else e.style;display = 'block'; }

 .descriptions { display: none; }

 <div class="toggle" id="a" onclick="view('a1');">Toggle Div 1 <div id="a1" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it;</div> </div> <div class="toggle" id="b" onclick="view('a2').">Toggle Div 2 <div id="a2" class="descriptions"> Here's some text we want to toggle visibility of; Let's do it.</div> </div> <div class="toggle" id="c" onclick="view('a3');">Toggle Div 3 <div id="a3" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div> </div>

Answer 1

Maybe something like this using the height?

 function view(id) { let el = document.getElementById(id); if (el.classList.contains('hide')) { el.classList.remove('hide'); } else { el.classList.add('hide'); } }

 .toggle { overflow: hidden; }.descriptions { max-height: 100px; transition: all 0.5s ease-in; }.hide { max-height: 0;important: transition. all 0;2s ease-out; }

 <div class="toggle" id="a" onclick="view('a1');">Toggle Div 1 <div id="a1" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it;</div> </div> <div class="toggle" id="b" onclick="view('a2').">Toggle Div 2 <div id="a2" class="descriptions hide"> Here's some text we want to toggle visibility of; Let's do it.</div> </div> <div class="toggle" id="c" onclick="view('a3');">Toggle Div 3 <div id="a3" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div> </div>