在扩展之前仅显示一定深度的元素

Question

这似乎与bootstrap提供的手风琴功能不同。

举一个例子，让我们现在就开始使用“如何格式化”信息。我想要它，它只显示深达X像素，然后停止直到展开。所以它可能看起来像：

然后，一旦扩展，

我碰巧使用bootstrap。是否有引导原生或其他HTML解决方案来创建这种体验？

假设我只想展示的东西是单个元素，例如图像，而不是一系列文本。这意味着像min-height：50px和overflow：hidden这样的解决方案将无法工作，因为它只会隐藏整个图像而不是隐藏整个图像。

Answer 1

我们可以使用jQuery .height()来完成知道元素的渲染高度，然后进行条件修改。

Documentation and examples for jQuery .height()。

Answer 2

高度和溢出的组合以及类的切换应该在这里起作用。

http://jsfiddle.net/fm56je84/1/

箭头的点击绑定到以下功能：

function expandCollapse() {
    $("#container").toggleClass("expanded");
    $(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}