Display an element only up to a certain depth until expanded

Question

This seems dissimilar to the accordion functionality provided by bootstrap.

To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:

and then, once expanded,

I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?

Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.

Answer 1

A combination of height and overflow in combination with the toggling of a class should work here.

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

The click of the arrow is bound to the following function:

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

Answer 2

We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.

Documentation and examples for jQuery .height().