Javascript 我想制作手风琴，默认情况下打开手风琴的第一个元素

我想让手风琴，其中一个是第一面板将默认打开，当用户点击一个元素的其他面板时，第一个面板将自动关闭，其他面板通常是打开的。 注意：我想在没有任何单一框架帮助的情况下使用纯javascript实现它

<div id="accordion">
        <div class="panel">
            <!-- first panel -->
            <div class="header">header1</div>
            <div class="body">body of panel 1</div>
        </div>
        <div class="panel">
            <!-- second panel -->
            <div class="header">header2</div>
            <div class="body">body of panel 2</div>
        </div>
        <div class="panel">
            <!-- third panel -->
            <div class="header">header3</div>
            <div class="body">body of panel 3</div>
        </div>
    </div>

校长1
面板1的主体
校长2
第2小组的主体
校长3
小组3的主体

这可能会给您一个想法，这个想法只是检查悬停并添加一个类，如果它退出容器，它应该将该类添加回第一个元素

函数addClass（elem）{
panels.map（panel=>panel.classList.remove（'active'））
元素classList.add（'active'）；
}
函数removeClass（）{
this.classList.remove（'active'）；
}
const panels=[…document.querySelectorAll（'.panel'）；
const container=document.querySelector（“#accordion”）；
panels.map（panel=>{
panel.addEventListener（'mouseover'，（）=>addClass（panel））；
panel.addEventListener（'mouseleave'，removeClass）；
})
container.addEventListener（'mouseleave'，（）=>addClass（panels[0]）
手风琴{
显示器：flex；
}
.小组{
显示器：flex；
边框：2倍实心；
弯曲方向：立柱；
}
.小组.机构{
显示：无；
}
.panel.active.body{
显示：块；
}

校长1
面板1的主体
校长2
第2小组的主体
校长3
小组3的主体

添加代码，没有它我们无法帮助您！下面是html代码