21

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.

dan
  • 43,914
  • 47
  • 153
  • 254
  • 1
    Not quite sure, but I guess `height:1em` should do the trick for displaying the first line. For the expansion I think javascript will be neccessary. – Quasdunk Aug 07 '11 at 12:22
  • 1
    Whatever the solution, the content should be hidden by adding a class in JS ASAP after loading. Then if JS is disabled, content will still be shown.FYI, blind and partially sighted people using a screen reader as well as users surfing with CSS disabled as well as search bots and their cache will have access to the whole content w/o any click. Can be a good or bad thing depending on your need. – FelipeAls Aug 07 '11 at 16:44

9 Answers9

18

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);
});
thirtydot
  • 224,678
  • 48
  • 389
  • 349
9

This is easily done using CSS + JavaScript. You just need to set the height of the div to the height of a single line, and hide all overflow. Then when the user clicks on the div, use a nice animation handler to perform a blind-down or other similar effect to show the full contents of the div.

Here is a very basic example (no animation): http://jsfiddle.net/9Lw6T/

aroth
  • 54,026
  • 20
  • 135
  • 176
7

$(document).on('click', '.collapsible', function () {
  $(this).toggleClass('collapsed');
});
p {
  cursor: pointer;
}

.collapsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="collapsible collapsed">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.</p>
<p class="collapsible">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.</p>
<p class="collapsible collapsed">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.</p>
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
0
<div id='a' onclick='toggletext'>first line<br /></div>

function toggletext(){
   var html= document.getElementById('a').innerHTML;
   if(html=='first line<br />'){
       html = 'first line<br />next lines<br />next lines<br />';
   }else{
       html = 'first line<br />';
   }
   document.getElementById('a').innerHTML = html
}

this can be optimized and can be made to use one of the common libs

Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
0

You could do this with some jQuery. 

<div id="a">
    <span id="first">This is the first line (read more)</span>
    <br />
    <span id="rest">This is the rest of the text</span>
</div>

script

$('#rest').hide();

$('#first').click(function(){
    $('#rest').show();        
});

http://jsfiddle.net/jasongennaro/dC32A/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
0

In CSS set the size of the div to size of the line (important: you might need to use line spacing attribute to get proper padding on the bottom with second line).

I don't know about clicking, but you can use :hover in CSS to change the style (reset line spacing, reset div size and overflow to proper values) to get on hover-show effect.

Or you can use JavaScript and change that CSS on click (easy to do with jQuery).

Chris Hasiński
  • 2,965
  • 2
  • 25
  • 34
0

Posting my comment as an answer:

Another approach could be, defining the class height: 1em; overflow-y: hidden; and then adding/removing it on click with javascript.

Or maybe you could also handle it in the :active-pseudo-class by wrapping your <div> with an <a>-tag, so no javascript would be needed. But then the div would collapse again on losing focus.

Quasdunk
  • 14,944
  • 3
  • 36
  • 45
0

This will be sufficient:

To hide all but the first line:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';

To show all the text:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';

Or, if you were to use jQuery:

$('#theDiv').css({ height: '1em', overflowY: 'hidden' });

$('#theDiv').css({ height: 'auto', overflowY: 'visible' });
FishBasketGordo
  • 22,904
  • 4
  • 58
  • 91
0

Setting the hide of the div to 1em and then exapnd it onclick is the solution.

Check this. I haven't used any JS library.

CSS

.expandable{
    height:1.2em;
    overflow:hidden;
}

HTML

<div class="expandable" onclick="expand(this)">Your text here</div>

JS

window.expand = function(el) {
    el.style.height = "auto";
}

Here is the fiddle

http://jsfiddle.net/RwM8S/1/

avetarman
  • 1,244
  • 9
  • 8