I want the downward opening motion to be a smooth animation as well as the upward motion.

```https://jsfiddle.net/qh701b8o/```

CodePudding user response：

I see your code - please use this code for solve problem:

HTML add transition for slow move

<div id="content"  style="transition: all 0.3s;">
...
</div>

CSS use opacity:0 instead of display:none

.content{
    opacity:0;
    max-height:0;
}

JS and use this function for change opacity and max-width

function arrow_click() {
    content.style.opacity = (content.style.opacity == '100') ? '0' : '100';
    
    if (content.style.maxHeight){
     content.style.maxHeight = 0 'px';
        }
    else {
        content.style.maxHeight = content.scrollHeight   "px";
    } 
    
    arrow_icon.className = (arrow_icon.className == "fa fa-angle-down") ? "fa fa-angle-up" : "fa fa-angle-down";
}

all of this code is here: https://jsfiddle.net/pad60yzq/