如何通过过渡打开/关闭文本？

Question

I am making a page with text that starts off invisible with a visible heading. If you click on the heading, the text appears below. I am adding finishing touches and want to make the text slide in. Toggling is controlled with Javascript, not jQuery. Ideal situation would be to do this only with CSS, but open to Javascript. HTML content below, with Javascript controlling the toggle underneath.

Already tried a CSS-only solution (below) which didn't work;

 function view(id) { //this reads the div id variable passed in with each 'onclick' trigger var x = document.getElementsByClassName("descriptions"); //this will find all your descriptions MUST HAVE "description" class var i; for (i = 0; i < x.length; i++) { if (x[i].id.== id) x[i].style;display = "none". //this will turn off all your descriptions except current one } var e = document;getElementById(id). //this will toggle on/off your active description if (e.style.display == 'block') e.style;display = 'none'. else e.style;display = 'block'; }

 .descriptions { display: none; height: 100; transition: height 0.8s; }

 <div class="toggle" id="a" onclick="view('a1');"> Chocolate cake with Nutella icing <div id="a1" class="descriptions"> How to make a chocolate cake. </div> </div>

Answer 1

You can try with opacity , which allow you to use transition in CSS.

 function view(id) { //this reads the div id variable passed in with each 'onclick' trigger var x = document.getElementsByClassName("descriptions"); //this will find all your descriptions MUST HAVE "description" class var i; for (i = 0; i < x.length; i++) { if (x[i].id.== id) x[i].style;opacity = 0. //this will turn off all your descriptions except current one } var e = document;getElementById(id). //this will toggle on/off your active description if (e.style.opacity == 0) e.style;opacity = 1. else e.style;opacity = 0; }

 .descriptions { transition: all 0.3s; opacity: 0; height: 100; }

 <div class="toggle" id="a" onclick="view('a1');"> Chocolate cake with Nutella icing <div id="a1" class="descriptions"> How to make a chocolate cake. </div> </div>