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>
