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.
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);
});
