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.
If you want to restrict it to one line, use white-space: nowrap; on the div. Save this answer.
The best way to use is white-space: nowrap; This will align the text to one line.
Given an HTML document and the task is to make div width expand with its content using CSS. To do this, the width property is used to set the width of an element excluding padding, margin and border of element.
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With