Html 以固定页脚格式显示手风琴内容的按钮

我想在页脚中创建“按钮”。单击这些按钮将以手风琴式样式显示内容。我已经生成了我认为是完美的代码，它可以工作，但是，当我点击其中一个时，所有的按钮都会随着内容向上移动。我只希望其中一个向上移动，其余的保持锁定在页脚上。此外，可能在窗口内居中（目前其粘贴在左侧）

任何帮助都将不胜感激

我在一张图片中添加了我想要的：

现在代码如下：

身体{
字体系列：“Lato”，无衬线；
保证金：0；
}
.页脚{
位置：固定；
底部：0px；
左边距：0自动；
文本对齐：居中；
宽度：100%；
}
* {
框大小：边框框；
}
/*创建两个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：20%；
左侧填充：10px；
右边填充：10px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.手风琴{
填充：18px；
左边距：10px；
右边距：10px；
背景色：#eee；
光标：指针；
宽度：100%；
文本对齐：居中；
边界：无；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.手风琴：悬停{
背景色：#ccc；
}
.小组{
文本对齐：左对齐；
左边距：10px；
右边距：10px；
宽度：100%；
背景色：#eee；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
.p.小组{
左侧填充：10px；
右边填充：10px；
}
我的页脚按钮
按钮1
按钮1要转到此处的内容和信息


按钮2
按钮2要转到此处的内容和信息


按钮3
按钮3要转到此处的内容和信息


按钮4
按钮4要转到此处的内容和信息


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

在.row上使用flexbox并对齐到末尾

.row {
    display: flex;
    align-items: flex-end;
    justify-content:center;
}

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

正文{
字体系列：“Lato”，无衬线；
保证金：0；
}
.页脚{
位置：固定；
底部：0px；
左边距：0自动；
文本对齐：居中；
宽度：100%；
}
* {
框大小：边框框；
}
/*创建两个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：20%；
左侧填充：10px；
右边填充：10px；
}
.行{
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.手风琴{
填充：18px；
左边距：10px；
右边距：10px；
背景色：#eee；
光标：指针；
宽度：100%；
文本对齐：居中；
边界：无；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.主动，
.手风琴：悬停{
背景色：#ccc；
}
.小组{
文本对齐：左对齐；
左边距：10px；
右边距：10px；
宽度：100%；
背景色：#eee；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
.p.小组{
左侧填充：10px；
右边填充：10px；
}

我的页脚按钮
按钮1
按钮1要转到此处的内容和信息


按钮2
按钮2要转到此处的内容和信息


按钮3
按钮3要转到此处的内容和信息


按钮4
按钮4要转到此处的内容和信息

非常感谢您。它工作得很好。正是我想要的。