Javascript 将内容推到固定位置标题后面

我对这个问题的看法是错误的

页眉和页脚绝对定位，100%宽度。中间的内容由仪表板表组成。标题由两个图像组成，单击后将切换内容。
当我点击

slide-toggle-1

，就会显示

headerbottombar

的内容。
但是中间的内容是隐藏和重叠的。
单击

slide-button-1

和

slide-button-2

时，如何正确显示中间内容的内容。
我要感谢所有的建议和解决方案。只要提供可行的解决方案，css、jquery和javascript中的解决方案都是可以接受的。

更新： 如果您想要一个粘在顶部的可变高度标题，您可能需要使用一些javascript动态调整内容的上边距

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

旧答案：

有很多方法可以实现你想要的。一种是将标题的位置更改为相对位置（并删除标题和内容之间的换行符）。如果使用

fixed

或

absolute

位置，标题将与正文内容重叠。而relative会随着标题的展开向下推送内容

见此：

---

p.S.页眉/页脚在代码中的位置是固定的，而不是绝对的，你为什么不尝试添加一个带有页边空白的类，以根据需要降低div。像这样：

.top{
边缘顶部：100px；
}

使用“.content”将此添加到您的div中，如下所示：

然后只需在2次单击中切换，如：

$（“.content”）.toggleClass（“top”）

您可以提供其他样式，但这是基本的详细说明。
请检查以下示例。高度识别使用脚本我们可以注入间距

脚本：

function heightCalc(){
         topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

提琴手示例：
详细解释您的问题。我看到了你的代码，它工作正常。当切换打开时，后面的内容必须隐藏。您想做什么？当切换打开时，我希望div类内容跟随在标题后面。在我的例子中，div类的内容放在标题后面。在我的例子中，客户要求标题始终可见，并且粘贴在顶部，所以我使用了标题固定位置。我可以用小提琴吗