Javascript 提示和修复此引导切换隐藏/显示不平滑的原因

刚刚完成我的引导切换隐藏/显示，除了查看不同内容的功能外，一切都很好，所有这些都非常前卫，一点也不平滑。。当激活切换等时，边框会跳转

我打赌剧本一定有点奇怪。。。不知道该怎么办，我希望有人能帮上忙

$（'.testver a i'）。在（'click'，函数（e）上{
var currTarget=$（this）.closest（'a'）.data（'target'）.substr（1）；
$（“#leftpanel”）.find（“[id^=“demo”]”）。not（currTarget）。collapse（'hide'）；
});
#左面板{位置：相对；}
#左面板h1{字体大小：18px；字体系列：“蒙特塞拉特黑体”；颜色：#b0a887；边框顶部：1px实心#eee；字体样式：普通；}
#leftpanel h2{字体大小：18px；字体系列：“蒙特塞拉特黑体”；颜色：#b0a887；字体样式：普通；}
#左面板a{左边距：230px；位置：相对；顶部：-40px；右侧：-100px；}
#demo1，#demo2，#demo3，#demo4{颜色：#333；字体大小：14px；页边距顶部：-40px；页边距右侧：5px；字体系列：'Myriad Pro 31655'；}
.collapse{}
.testver{宽度：370px；}
.testver人力资源部{
}
.fa角度向上{
显示：无；
}
testver一号{
}
.testver.fa{
正确的：
}
.arrow[aria expanded=“true”].fa角度向上{
显示：内联块；
}
.arrow[aria expanded=“true”].fa角度向下{
显示：无；
}

前所未见
文本

艺术与技术
文本

真实性
文本

详细程度
文本

这是因为
利润率最高：-40px

您应该使用另一个技巧消除间隙，例如
边距底部：-20px
到

并从
顶部：-40px