<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script>
// Variable que contiene los textos que se encuentren en los <span> dentro
// de la clase "texto"
var arrayText=Array();
$(document).ready(function(){ // bucle por todos los objetos con el class texto
$(".texto").each(function(){
// apuntador al primer span dentro de la clase .texto
var firstDiv=$(this).find("span:first-child");
// revisamos que el texto sea superior a 100 caracteres para
// cortarlo
if(firstDiv.html().length>100)
{ // añadimos el texto entero en un array de JavaScript
arrayText.push(firstDiv.html());
// ponemos el texto cortado a 100 caracteres
firstDiv.html(firstDiv.html().substr(0,100)+"...");
// Agregamos un span que nos permitira visualizar más texto
// La clase "cortado", unicamente nos identifica si estamos
// viendo el contenido entero o cortado.
// Añadimos un id con el indice del array, para posteriormente
// poder mostrar el texto completo.
$(this).append("<span class='mas cortado' id='"+(arrayText.length-1)+"'>(más)</span>"); }
// mostramos el contenido de la clase texto (por defecto esta con
// display:none;
$(this).show();
});
// Evento que se ejecuta cuando se pulsa la clase mas
$(".texto .mas").click(function(){
// Si disponemos de la clase "menos" quiere decir que estamos
// mostrando el contenido cortado
if($(this).hasClass("cortado")) { // añadimos al <span> anterior al pulsado el contenido entero
// del array de valores. Para saber el indice del array
// obtenemos el id del span donde se ha hecho click.
$(this).prev("span").html(arrayText[$(this).attr("id")]);
// modificamos el texto a "(menos)" y eliminamos la clase "cortado"
$(this).html("(menos)").removeClass("cortado"); }else{ // añadimos al <span> anterior al pulsado el contenido cortado
// del array de valores. Para saber el indice del array
// obtenemos el id del span donde se ha hecho click.
$(this).prev("span").html(arrayText[$(this).attr("id")].substr(0,100)+"...");
// modificamos el texto a "(mas)" y añadimos la clase "cortado"
$(this).html("(más)").addClass("cortado"); }
});
});
</script>
<style>
.texto { border:1px solid #808080;
font-family:Arial;
font-size:14px;
overflow:hidden;
padding:5px;
width:300px;
display:none;
transition: 0.5s ease;
}
.texto .mas { cursor:pointer;
color:blue;
font-size:12px;
}
</style>
</head>
<body>
<div class="texto">
<span>Primer texto. Esta comunidad de programadores está diseñado para que tanto programadores aficionados como profesionales puedan disponer de una herramienta completa y actualizada, con el fin de compartir conocimientos, resolver dudas o publicar sus propias creaciones.</span>
</div>
<p> </p>
<div class="texto">
<span>Segundo texto. Esta comunidad de programadores está diseñado para que tanto programadores aficionados como profesionales puedan disponer de una herramienta completa y actualizada, con el fin de compartir conocimientos, resolver dudas o publicar sus propias creaciones.</span>
</div>
<p> </p>
<div class="texto">
<span>Texto inferior a 100 caracteres... no aparece la opcion de ver mas o menos texto</span>
</div>
</body>
</html>
