How do you show just the first line of text of a div and expand on click?

Question

I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.

Is there an easy way to do this through css + javascript? I use jQuery.

Answer 1

Assuming that you don't want to use any JavaScript library (which is odd).

See: http://jsfiddle.net/JUtcX/

HTML:

<div id="content"></div>

CSS:

#content {
    border: 1px solid red;
    height: 1em;
    padding: 2px; /* adjust to taste */
    overflow: hidden    
}

JavaScript:

document.getElementById("content").onclick = function() {
    this.style.height = 'auto';
}

---

Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.

See: http://jsfiddle.net/JUtcX/2/

$('#content').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).animate({height: fullHeight}, 500);
});