I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling instead of jQuery. While I would prefer a CSS-only solution, I am also open to using Javascript. Below is the HTML content with Javascript controlling the toggle:
I attempted a CSS-only approach (shown below) which was unsuccessful;
function view(id) { //this function reads the div id variable passed in with each 'onclick' trigger
var x = document.getElementsByClassName("descriptions"); // this will find all descriptions that have the "description" class
var i;
for (i = 0; i < x.length; i++) {
if (x[i].id !== id)
x[i].style.display = "none"; //turn off all descriptions except the current one
}
var e = document.getElementById(id); //toggle on/off the 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>