如何使用基本javascript代码平滑地打开下拉列表？

用这段代码单击“Clicker”时，如何使红色背景的“内容”区域从上到下平滑打开？另外一个问题是，如何用相同的javascript代码在相同的Html中添加更多的点击器？如果我复制这些，只有一个工作

函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

手风琴{ 位置：相对位置； 宽度：100%； 高度：自动； 背景：红色； }格里德先生{ 显示：块； 宽度：100%； 背景：#fff； } #我的链接{ 显示：无； } .内容{ 高度：50px；}

内容

您不需要所有动画都使用Javascript。为什么不试试CSS呢

const btns=document.querySelectorAll（“.btn下拉列表”）
btn.forEach（btn=>{
btn.addEventListener（'click'，函数（e）{
e、 target.classList.toggle（'open'）
})
})

html，
身体{
保证金：0；
字体系列：Arial；
}
导航{
显示器：flex；
}
.btn下拉列表{
位置：相对位置；
光标：指针；
填充：8px 16px；
边框：1px纯色灰色；
}
.下拉式内容容器{
溢出y：隐藏；
最大高度：0；
过渡：均为0.25秒；
}
.btn下拉列表。打开>下拉列表内容容器{
最大高度：120px；
过渡：全部为0.4s；
}

单击1
下拉内容1
点击2
下拉内容2.1
下拉内容2.2
下拉内容2.3
下拉内容2.4

您用jQuery标记了这个，所以您可能正在寻找这样或那样的答案