Ejemplos de enlace "Leer más" con jQuery y CSS

Ejemplos de enlace "Leer más" con jQuery y CSS

Es habitual que en determinados casos nos soliciten que textos más o menos largos se presenten en forma abreviada con la posiblidad de desplegarlos completamente o volverlos a ocultar.

Si no tenemos acceso a las plantillas generadas por el gestor de contenido, una forma sencilla de hacerlo es mediante Javascript. En nuestros desarrollos por lo general usamos jQuery para disponer de una amplia gama de efectos. Manipularíamos el fragmento de HTML que quisiéramos abreviar para añadir un enlace que despliegue el texto completo al pincharlo y lo oculte de nuevo si es necesario.

Se podría realizar el efecto también con una ténica mixta jQuery + CSS o con CSS puro como veremos más abajo.

Un pequeño script para realizar el efecto Leer más/menos sería el siguiente:

 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.

Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.

<style>
   .morecontent { display: none; }
   .morelink { display: block; cursor: pointer; color:#2196f3; }
   .morelink:hover { text-decoration:underline; }
   .hidden { display:none; }
</style>
<script src="jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
      var showChar = 300;
      var ellipsestext = "...";
      var moretext = "Seguir leyendo >";
      var lesstext = "Mostrar menos";       
      var content = $('.more').html();
      
      if(content.length > showChar) {
         var c = content.substr(0, showChar);
         var html = '<div class="abstract">' + c + ellipsestext + '</div>' + '<div class="morecontent">' + content + '</div>' + '<p><span class="morelink">' + moretext + '</span></p>';
          $('.more').html(html);
       }
         
       $('.morelink').click(function() {
          if($(this).hasClass('less')) {
             $(this).removeClass('less');
             $(this).html(moretext);
             $('.abstract').removeClass('hidden');
           } else {
             $(this).addClass('less');
                 $(this).html(lesstext);
                 $('.abstract').addClass('hidden');
           }
           $(this).parent().prev().slideToggle('fast');
           $(this).prev().slideToggle('fast');
                return false;
        });
    });
</script>
<div class="more">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.</p>
   <p>Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.</p>
</div>

Alternativa mixta Javascript + CSS

Podríamos realizar la misma tarea usando jQuery para recortar el texto dado y añadirle el código HTML necesario para poder realizar el efecto de plegado con estilos CSS. Para realizar el efecto utilizaríamos la técnica descrita en esta otra historia.

 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.

Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.

<style>
    #morecss-trigger-toggle { cursor: pointer; }
    #morecss-element-toggle { display:none; }
    #morecss-element-toggle:not(:checked) ~ #morecss-toggled-element { display:none; }
    #morecss-element-toggle:not(:checked) ~ #morecss-trigger-toggle .lesslink { display:none; }
    #morecss-element-toggle:checked ~ #morecss-abstract { display:none; }
    #morecss-element-toggle:checked ~ #morecss-trigger-toggle .morelink { display:none; }
    #morecss .morelink, #morecss .lesslink { display: block; cursor: pointer; color:#2196f3; }
    #morecss .morelink:hover, #morecss .lesslink:hover { text-decoration:underline; }
</style>
<script>
    $(document).ready(function() {
        var showChar = 300;
        var content = $('#morecss').html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var html = '<input id="morecss-element-toggle" type="checkbox" /><div id="morecss-abstract">' + c + '...' + '</div>' + '<div id="morecss-toggled-element">' + content + '</div>' + '<label for="morecss-element-toggle" id="morecss-trigger-toggle"><span class="morelink">Seguir leyendo ></span><span class="lesslink">Mostrar menos</span></label>';
            $('#morecss').html(html);
        }
    });
</script>
<div id="morecss">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.</p>
    <p>Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.</p>
</div>

Alternativa CSS puro

Si tenemos acceso al código de plantilla que genera nuestro gestor de contenido, podemos aplicar la misma técnica con CSS puro, sin recurrir a Javascript:

 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis eui...

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.

Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.

<style>
    #morecsspure-trigger-toggle { cursor: pointer; }
    #morecsspure-element-toggle { display:none; }
    #morecsspure-element-toggle:not(:checked) ~ #morecsspure-toggled-element { display:none; }
    #morecsspure-element-toggle:not(:checked) ~ #morecsspure-trigger-toggle .morecsspure-lesslink { display:none; }
    #morecsspure-element-toggle:checked ~ #morecsspure-abstract { display:none; }
    #morecsspure-element-toggle:checked ~ #morecsspure-trigger-toggle .morecsspure-morelink { display:none; }
    #morecsspure .morecsspure-morelink, #morecsspure .morecsspure-lesslink { display: block; cursor: pointer; color:#2196f3; }
    #morecsspure .morecsspure-morelink:hover, #morecsspure .morecsspure-lesslink:hover { text-decoration:underline; }
</style>

<div id="morecsspure">
    <input id="morecsspure-element-toggle" type="checkbox" />
    <div id="morecsspure-abstract">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis eui...</p>
    </div>
    <div id="morecsspure-toggled-element">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit viverra sapien, sit amet condimentum massa ultrices ac. Quisque posuere lorem sit amet ligula pharetra finibus. Pellentesque non egestas orci. Fusce et mi nec nisi rhoncus iaculis at nec massa. Fusce convallis euismod luctus. Duis faucibus id lectus sed imperdiet. Maecenas velit nisi, vehicula id est id, fringilla laoreet risus. Fusce sed urna ligula. Proin nec enim et diam blandit viverra porttitor a mauris. Sed a faucibus magna, ut ornare diam. Ut eget odio a lorem convallis vehicula. Praesent eu fringilla arcu. Donec nec sem nec sem ullamcorper ultricies at nec sem.</p>
        <p>Vestibulum eleifend eu dolor non aliquam. Donec dapibus nunc a mi luctus, et viverra magna mattis. Sed feugiat varius commodo. Proin faucibus tristique tincidunt. In a libero elementum, elementum velit nec, lobortis purus. Phasellus quis malesuada ipsum. Nunc in sollicitudin nunc, at tincidunt orci. Cras aliquet aliquet enim nec feugiat. Cras eleifend in dui vel vehicula. Morbi lorem velit, blandit laoreet mi sit amet, bibendum lobortis erat. Sed nec ullamcorper eros. Praesent a sem orci. Nulla rhoncus dui in nisl mollis, sit amet placerat mauris aliquet. Donec in nunc in odio interdum egestas ac quis sem. Nulla pretium erat bibendum, tincidunt dui at, porta nibh. Aliquam congue tortor quam, et placerat ex venenatis at.</p>
    </div>
    <label for="morecsspure-element-toggle" id="morecsspure-trigger-toggle"><span class="morecsspure-morelink">Seguir leyendo ></span><span class="morecsspure-lesslink">Mostrar menos</span></label>
</div>


Historias relacionadas

Mapas interactivos sin usar Google Maps

Mapas interactivos sin usar Google Maps

Leaflet es una librería JavasScript de código abierto para embeber mapas. Es una librería perfecta para sustituir a Google Maps en los sitios en que queremos incluir un mapa de situación de nuestro negocio o una serie de marcadores con direcciones de interés.

Recientemente, hemos utilizado esta librería en el proyecto Podorunners, en el que ...

Creando temas visuales para Wordpress con Timber y Twig

Creando temas visuales para Wordpress con Timber y Twig

Uno de los mayores problemas de los temas visuales de WordPress es la mezcla de código PHP y código HTML. Esto genera archivos difíciles de entender en muchas ocasiones y con potenciales problemas de seguridad en otras. La dificultad que supone manejar estos archivos a muchos diseñadores web, les lleva a usar plugins visuales para ...

División por sílabas en Scribus y Debian

División por sílabas en Scribus y Debian

En el diseño del libro Indumentaria de Segovia usamos Scribus que es nuestra aplicación de referencia para la maquetación de textos. Es una herramienta gratuita de software libre suficientemente madura para trabajos a nivel profesional, estando a la altura de Adobe InDesign, por ejemplo.

En maquetación de libros y otras publicaciones, una de las razones ...

Solicítanos información

 Tel: (+34) 983 070 900

    Envía un correo