Foros del Web - Ver Mensaje Individual - "ver mas" o manejar overflow de texto con jquery.

Dany_s · #7 (**permalink**) 13/10/2010, 13:57

No sé si te sirve este, expande con clic en el título

Primero capturo el tamaño del div que contiene la descripción para saber hasta donde ampliar y para comenzar le doy una altura minima para cuando esté contraido

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
    alturamaxima = $('.descripcion').height() + 'px';
    alturaMinima = '14px';
    $('.descripcion').height(alturaMinima);
    $('.contenedor .titulo').toggle( function (){
        $(this).next().animate({height: alturamaxima},1000);
    }, function (){
        $(this).next().animate({height: alturaMinima},1000);
    });
});
</script>
<style>
    body{font-size:12px; font-family:Arial}
    .contenedor{border:1px solid #ccc; background:#E2E2E2; width:150px;}
    .titulo{background:#CDCDCD; cursor:pointer}
    .contenedor, .titulo, .descripcion{padding:3px}
    .descripcion{background:#F0F0F0; overflow:hidden}
</style>
</head>
<body>
 
    <div class="contenedor">
        <div class="titulo">Título</div>
        <div class="descripcion">Esta es una descripcion larga. Esta es una descripcion larga. Esta es una descripcion larga. Esta es una descripcion larga. Esta es una descripcion larga. TERMINO</div>
    </div>
 
</body>
</html>