只显示一个元素直至展开为止

Question

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

举一个例子，让我们先看看“如何格式化”信息。我希望它只显示最深X像素，然后停止，直到展开。因此，它可能看起来像：

然后，一旦扩大，

我碰巧使用的引导。是否有自举或其他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 
}