Tabs 从页面内滑出面板

我无法将各种幻灯片面板插件应用于页面中的div。因此，不是从浏览器窗口的顶部、侧面或底部，而是从页面内的某个位置

这会有用的

$("div").click(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
});

但是div会滑出视图，因此没有可单击的选项卡将其滑回视图

我可以使用一个单独的元素来启动click函数，但是我需要clickable元素作为连接到滑动div的选项卡

当页面加载时，你会看到屏幕中间有一个面板，它会有一个小标签从面板的底部伸出。单击该选项卡时，它会随着带有附加信息的面板向上滑动。再次单击选项卡时，它会向下滑动

---

非常感谢您的帮助。

您需要在其旁边添加另一个div，用作切换选项卡，一个不会被隐藏的选项卡。让该选项卡隐藏/显示要隐藏的div

$("#tab").click(function () {
    $("#slider").slideToggle("slow");
});

---

看这把小提琴：

非常近。这可能适用于某些场景。不过，我想要的是选项卡随面板一起移动。使用您提供的功能，面板将从选项卡所在的位置向下滑动。我希望面板和标签可以向上滑动。编辑-我应该先看看JSFIDLE示例。这与我想要的非常接近，并且选项卡确实随面板移动。我将进一步研究它，但我认为您提供了正确的解决方案。看起来应该很简单，但是。。。我想要和你提供的完全相反的东西。我希望标签在顶部而不是底部，我希望滑动向上而不是向下显示。我已取消选中上面的答案。我能够翻转面板并使幻灯片正确移动，但是标签保持在原来的位置，所以它不会像连接到面板一样工作。