Javascript 如何创建用以下内容展开的按钮

我想做的是在单击时使一个包含内容的div显示在另一个div下。我所拥有的是一个按钮堆叠在一起的菜单，我希望能够单击一个按钮，并让内容直接显示在单击的按钮下方和下一个按钮的顶部。我试着调整另一个菜单，就像我已经使用过的一样，但我似乎不能正确地使用它，内容出现在整个菜单下面的它自己的框中。这里有一个链接到

内容

内容

内容

内容

CSS-
.教育{
高度：800px；
宽度：100%；
背景色：rgba（1891861860.3）；
边框：1px实心#7EC9B1；
明确：两者皆有；
显示：内联块；
}
.学校标签{
显示：内联块；
}
.学校选项卡：之后{
显示：块；
明确：两者皆有；
内容：''；
}
教育中心{
文本对齐：居中；
}
.学校标签李{
保证金：5px0；
列表样式：无；
}
.学校标签a{
文本对齐：居中；
显示：内联块；
边界半径：3px 3px 3px 3px；
背景：rgba（1891861860.1）；
字体大小：48px；
字号：600；
颜色：#7EC9B1；
过渡：全线性0.15s；
文字装饰：无；
字体系列：Helvetica，verdana，“投石机ms”；
宽度：800px；
高度：100px；
线高：100px；
}
.学校选项卡a：悬停{
背景#043F44；
文字装饰：无；
}
li.active a，li.active a:悬停{
背景：#7EC9B1；
颜色：#ffffff；
}
.教育内容{
填充：15px；
边界半径：3px；
盒影：-1px 1px 1px#7EC9B1；
背景：rgba（1891861860.3）；
边框顶部：3px实心#7EC9B1；
}
.edu选项卡{
显示：无；
}
.edu-tab.active{
显示：块；
}
.edu选项卡p{
字号：18px；
字体系列：Helvetica，verdana，“投石机ms”；
列表样式类型：无；
线高：25px；
文本对齐：居中；
}
Jquery-
jQuery（文档）.ready（函数（）{
jQuery（'.education.school选项卡a'）。在（'click'，函数（e）上{
var currentAttrValue=jQuery（this.attr（'href'）；
jQuery（'.education'+currentAttrValue）.slideDown（400）.sides（）.slideUp（400）；
jQuery（this）.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
e、 预防默认值（）；
});
});

我同意科里的观点，手风琴可能是最好的选择

我更新了小提琴

---

手风琴是最好的选择！一切都解决了！谢谢你的回答

我想你要找的是这样一个手风琴小部件：

<div class="education">
<div class="center-edu">
    <ul class="school-tab">
        <li class="active"><a href="#edu-tab1">Code School</a>
        </li>
        <li><a href="#edu-tab2">Codecademy</a>
        </li>
        <li><a href="#edu-tab3">Grossmont College</a>
        </li>
        <li><a href="#edu-tab4">Steele Canyon</a>
        </li>
    </ul>
</div>
<div class="edu-content">
    <div id="edu-tab1" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab2" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab3" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab4" class="edu-tab">
        <p>content</p>
    </div>
</div>

CSS - 

.education {
    height: 800px;
    width: 100%;
    background-color: rgba(189, 186, 186, 0.3);
    border: 1px solid #7EC9B1;
    clear: both;
    display: inline-block;
}
.school-tab {
    display: inline-block;
}
.school-tab:after {
    display: block;
    clear: both;
    content:'';
}
.center-edu {
    text-align: center;
}
.school-tab li {
    margin: 5px 0;
    list-style: none;
}
.school-tab a {
    text-align: center;
    display: inline-block;
    border-radius: 3px 3px 3px 3px;
    background: rgba(189, 186, 186, 0.1);
    font-size: 48px;
    font-weight: 600;
    color: #7EC9B1;
    transition: all linear 0.15s;
    text-decoration: none;
    font-family: Helvetica, verdana, "trebuchet ms";
    width: 800px;
    height: 100px;
    line-height: 100px;
}
.school-tab a:hover {
    background: #043F44;
    text-decoration: none;
}
li.active a, li.active a:hover {
    background: #7EC9B1;
    color: #ffffff;
}
.edu-content {
    padding: 15px;
    border-radius: 3px;
    box-shadow: -1px 1px 1px #7EC9B1;
    background: rgba(189, 186, 186, 0.3);
    border-top: 3px solid #7EC9B1;
}
.edu-tab {
    display: none;
}
.edu-tab.active {
    display: block;
}
.edu-tab p {
    font-size: 18px;
    font-family: Helvetica, verdana, "trebuchet ms";
    list-style-type: none;
    line-height: 25px;
    text-align: center;
}
Jquery - 
    jQuery(document).ready(function () {
    jQuery('.education .school-tab a').on('click', function (e) {
        var currentAttrValue = jQuery(this).attr('href');
        jQuery('.education ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
        e.preventDefault();
    });
});

jQuery('.education .school-tab a').on('click', function (e) {
        var position = $(this).position();
           $('.edu-content').css({'position' : 'absolute',
            'left' : position.left,
             'top' : position.top + $(this).height(),
             'width':  $(this).width()                  
                                 });