选项卡div停靠在浏览器中。单击时使用jquery滑入和滑出屏幕

我有几件事，我想做的DIV看到的图片中所附的，我一直无法弄清楚。这些div使用CSS定位固定在浏览器的下角。我想使用CSS为每个选项卡添加一个选项卡，当用户单击选项卡部分时，它会在屏幕上上上下滑动，只有选项卡部分在隐藏时才会显示。现在，我在隐藏div的角落中有（x）。我更希望标题文本在选项卡上，而不是在div中

任何关于使这个div成为选项卡的帮助，以及关闭时jquery向下滑动的一些想法都会很有帮助。谢谢

.ib {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width:250px;
  height: 98%;
}
.narrow {
  width:150px;
}


    $(document).on('click', '#close1,#close2', function (e) {
        $(this).parent().fadeOut(500);

        e.stopPropagation();
    });

<footer id="footer" class="footer" runat="server">
    <div id="supportDiv" class="ib questionbg narrow" runat="server">
        <span id='close1'>x</span>
    </div>

    <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
        <span id='close2'>x</span>
        <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
        <div style="margin-left:20px; vertical-align:top">
            <asp:PlaceHolder id="documentList" runat="server"></asp:PlaceHolder>
        </div>
    </div>

</footer>

.ib{
背景：#FFFAEA；
边框：实心#cab781 1px；
显示：内联块；
宽度：250px；
身高：98%；
}
.狭窄{
宽度：150px；
}
$（文档）。在（'单击'，'关闭1，'关闭2'，函数（e）{
$（this.parent（）.fadeOut（500）；
e、 停止传播（）；
});
x
x
这有点粗糙，但这里我用jQuery创建了tab控件DOM元素，并将它们作为.ib tab元素的第一个子元素插入。然后让页脚监听选项卡控件元素上的单击，并根据需要切换选项卡。您需要注意的是，如果用户正在选择不同的选项卡，请在打开新选项卡时关闭其上一个选择

正如我所说，这有点粗糙。我还没有弄清楚为什么slideToggle在隐藏标签内容的过程中会将其从容器el中分离出来，但在其他方面，它似乎在做你正在寻找的事情。当然，你需要创建一些比我更漂亮的CSS。再一次，粗糙


/***
*首先，我们必须创建选项卡控件功能
*对于每个页脚选项卡窗格
***/
$（“.ib”）。每个（函数（）{
//对于每个选项卡，如果它有一个标题，我们可以将其用作选项卡标题。
var tabEl=$（本）；
var tabTitle=tabEl.find（“.helpheader”）.text（）；
var leftPos=tabEl.index（）*130；
//创建选项卡控件DOM结构。。。
var tabBar=“”+tabTitle+”；
//将该选项卡控件作为选项卡的第一个子项插入。
tabEl.children（）.first（）.before（tabBar）；
//隐藏其余选项卡元素，仅显示选项卡控件。
tabEl.find（“：first child”）.sides（）.hide（）；
//使用此选项卡上的closedTab类
tabEl.css（“left”，leftPos+“px”）.addClass（“closedTab”）；
});
/****
*用于单击选项卡控件的处理程序
*这将隐藏选项卡控件，显示选项卡
*将类从关闭更改为打开，然后
*在任何显示的同级上反转该过程。
****/
$（“#页脚”）。在（“单击”，“选项卡控件”，函数（）上）{
//获取特定的tab元素。
var tabEl=$（this.parent（）；
//隐藏选项卡控件，并显示其余内容。
$（this.hide（）.sides（）.show（）；
//删除closedTab类，添加openTab。
tabEl.addClass（“openTab”）.removeClass（“closedTab”）；
//下一行做了很多工作，它需要电流
//tabEl，并遍历标记为openTab的所有同级，
//将它们从openTab更改为closedTab，并显示
//选项卡控件并隐藏其他所有内容。
tabEl.兄弟姐妹（“.openTab”）
.removeClass（“openTab”）
.addClass（“closedTab”）
.find（“：第一个孩子”）
.show（）
.兄弟姐妹（）
.slideToggle（）；
})
$（“#页脚”）。在（'click'，'.close'，函数（e）上{
//获取当前选项卡元素。
var tabEl=$（this.parent（）；
//将当前选项卡从openTab切换到closedTab。
tabEl.addClass（“closedTab”）.removeClass（“openTab”）；
//隐藏除选项卡控件之外的所有内容。
tabEl.find（“：first child”）.show（）.sides（）.slideToggle（）；
});
.footer{
位置：固定；
底部：0；
高度：100px；
}
.ib{
显示：内联块；
位置：绝对位置；
底部：0；
}
.ib内容{
左边距：20px；
垂直对齐：顶部；
位置：相对位置；
}
.选项卡控件{
宽度：120px；
高度：20px；
背景：#FFFAEA；
边框：实心#cab781 1px；
溢出：关闭；
}
.closedTab{
}
.openTab{
背景：#FFFAEA；
边框：实心#cab781 1px；
显示：内联块；
宽度：250px；
高度：50px；
}
.狭窄{
宽度：150px；
}
.结束{
位置：相对位置；
浮动：对；
}

x
侵权行为。虎口浮雕和肘部浮雕同侧前庭；Donec velit neque，拍卖人坐在amet aliquam vel，ullamcorper坐在amet ligula。乌尔里西斯·利古拉是一位伟大的政治家。纳拉奎斯
洛雷姆·乌特·马莱苏亚达·费吉亚特。Donec sollicitudin molestie malesuada

x
帮助文档
这是一个自由的世仇。Lorem ipsum dolor sit amet，是一位杰出的献身者。大法官万岁，拉西尼亚·埃吉特被任命为法官，在特卢斯举行会议。不可为空的策展人必须为自己的利益而奋斗。纳拉
蓄积门

我将试一试。谢谢是的。非常感谢。