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

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

Campo de búsqueda "responsive" con transiciones CSS

Campo de búsqueda "responsive" con transiciones CSS

El desarrollo de una barra de navegación responsive estándar con Bootstrap es sencillo. La cosa se complica en dispositivos móviles pequeños cuando queremos incluir varias funcionalidades diferentes y que siempre estén presentes. Para la web efisioterapia.net que funciona sobre Drupal 7, además de solucionar el reto de tener un campo de búsqueda siempre presente ...

Solicítanos información

 Tel: (+34) 983 070 900

    Envía un correo