Javascript 在窗口底部创建一个固定的可折叠手风琴

我想在页面窗口的底部创建一个固定的可折叠手风琴，如下所示。样品底部有灰色手风琴

任何帮助都会很好

谢谢

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

/*设置用于打开和关闭手风琴面板的按钮的样式*/
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
分区小组{
填充：0 18px；
背景色：白色；
显示：无；
}
/*当用户单击其中一个按钮时，“show”类被添加到accordion面板中。这将显示面板内容*/
div.panel.show{
显示：块；
}

第1节
同侧眼线

创建一个包装器

div

，并为其提供以下

样式

：

.wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
 }

只缺少动画，但不确定是否需要动画

演示

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

.wrapper{
位置：固定；
底部：0；
左：0；
宽度：100%；
}
/*设置用于打开和关闭手风琴面板的按钮的样式*/
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#ddd；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
分区小组{
填充：0 18px；
背景色：白色；
显示：无；
}
/*当用户单击其中一个按钮时，“show”类被添加到accordion面板中。这将显示面板内容*/
div.panel.show{
显示：块；
}

第一节
同侧眼线