¿Cómo se muestra solo la primera línea de texto de un div y se expande al hacer clic?

Question

Quiero mostrar solo la primera línea de un bloque de texto envuelto, y luego mostrar todo el bloque al hacer clic. Además, me gustaría saber cómo volver a cambiarla a la versión compacta de una línea con un segundo clic.

¿Hay una manera fácil de hacer esto a través de css + javascript? Yo uso jQuery.

Answer 1

Suponiendo que no desea utilizar ninguna biblioteca de JavaScript (que es impar).

Ver: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'; 
} 

---

Alternativamente, si desea utilizar un marco de JavaScript, como jQuery, puede animar la misma.

Ver: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); 
}); 

Answer 2

<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 
} 

esto puede ser optimizado y se pueden hacer para usar una de las librerías comunes

Answer 3

usted puede hacer esto con un poco de 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> 

guión

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

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

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

Answer 4

Esto se hace fácilmente usando CSS + JavaScript. Solo necesita establecer la altura del div a la altura de una sola línea y ocultar todo desbordamiento. Luego, cuando el usuario haga clic en el div, use un buen manejador de animación para realizar un efecto de bajada de luz u otro efecto similar para mostrar el contenido completo del div.

Aquí es un ejemplo muy básico (sin animación): http://jsfiddle.net/9Lw6T/

Answer 5

En CSS ajustar el tamaño del div con el tamaño de la línea (importante: puede que tenga que utilizar la línea de separación de atributo para obtener el acolchado apropiado en el abajo con la segunda línea).

No sé cómo hacer clic, pero puede usar :hover en CSS para cambiar el estilo (restablecer el espaciado entre líneas, restablecer el tamaño de div y desbordamiento a los valores correctos) para activar el efecto de visualización.

O puede usar JavaScript y cambiar ese CSS al hacer clic (fácil de hacer con jQuery).

Answer 6

Publicar mi comentario como respuesta:

Otro enfoque podría ser, definiendo la clase height: 1em; overflow-y: hidden; y luego añadir/eliminar en clic con javascript.

O tal vez también se puede manejar en el -pseudo clase :active envolviendo su <div> con un -tag <a>, por lo que no sería necesario Javascript. Pero entonces el div se colapsaría nuevamente al perder el foco.

Answer 7

Esto será suficiente:

Para ocultar todos excepto la primera línea:

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

Para mostrar todo el texto:

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

O, Si se va a usar jQuery:

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

$('#theDiv').css({ height: 'auto', overflowY: 'visible' }); 

Answer 8

Ajuste de la piel de la div a 1 em y luego exapnd que onclick es la solución.

Mira esto. No he usado ninguna biblioteca JS.

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"; 
} 

Aquí está el violín

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

Answer 9

$(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>