En esta entrada vamos a hacer un ejemplo de como expandir o esconder texto o contenido y mostrarlo al darle clic a un botón o liga (leer más / leer menos).
Anteriormente ya había subido un ejemplo utilizando la librería de jquery Expander pero esta es una manera más sencilla.
Aveces en nuestras páginas web existen secciones en donde hay que colocar mucho texto y para el usuario puede ser molesto o cansado ver una página con un montón de lineas que aveces no son de suma importancia para todos, o por ejemplo también podemos querer poner secciones de noticias y mostrar varios bloques con texto que por cuestión de diseño pues no se puede poner el texto completo. Para este tipo de ejemplos el expandir y contraer texto o contenido es una excelente opción.
En el ejemplo vamos a expandir un párrafo o tag <p> pero funciona igual con <div> <table> etc.
Es algo realmente muy sencillo y es uno de esos trocitos de código que nos resuelven el día. El resultado se verá como la imagen pero vamos a ver paso a paso como hacerlo.
Cabe mencionar que este ejemplo te muestra una de las tantas maneras de hacerlo sinceramente es muy fácil y requiere muy poco código además en este ejemplo lo vamos a hacer con código js sin necesidad de utilizar jquery.
Con lo que vamos a trabajar es con la opción display (none/inline); Este atributo se le agrega a la etiqueta por medio del style y lo que hace al ponerle display:none es desaparecer esa etiqueta con todo y su contenido. Funciona parecido al visibility la diferencia es que al usar visibility:hidden aunque no aparece la sección en la pantalla si se puede visualizar el espacio en el que se encuentra, en este caso tendríamos un gran espacio en blanco, y con display none el tamaño de la sección se expande o se contrae si está o no está la sección.
Te invito a que les des una checada a estos atributos de las etiquetas existe muchísima información sobre estos atributos.
Bueno pasemos al ejemplo.
Para este ejemplo vamos a usar un solo archivo al que le voy a llamar vermas.html y para que funcione y se vea como el resultado final voy a usar código js y un poquito de css para darle estilo y colores.
Muy bien lo primero que vamos a hacer es crear un archivo con la estructura básica de html.
dentro del body vamos a crear un div que va a ser el que contenga todo.
Dentro del div vamos a crear un <h1> que va a tener el titulo del ejemplo y otro div que va a hacer el que contenga los párrafos.
Dentro del segundo div vamos a crear dos etiquetas <p> en la primera vamos a poner la cantidad de texto que queremos que este visible y la otra parte del texto la vamos a poner dentro del segundo <p>
Ahora al final del texto del primer <p> vamos a poner una etiqueta <a> a la que le vamos a poner el texto "...[leer más]" y al final del texto del segundo párrafo <p> vamos a poner otra <a> a la que le vamos a añadir el texto "...[leer menos]".
Algo sumamente importante son los id de las etiquetas en este caso a la etiqueta <a> (leeer mas) le puse el id="mas" y a la segunda etiqueta <a> (leer menos) le puse el id="menos". También le puse el id="desplegar" al segundo <p> que es el que se va a expandir o contraer.
El código quedaría de la siguiente manera:
<body>
<div>
<div class="parrafo">
<h2>El águila y la zorra </h2>
<p>
Un águila y una zorra que eran muy amigas decidieron vivir juntas
con la idea de que eso reforzaría su amistad. Entonces el águila escogió
un árbol muy elevado para poner allí sus huevos, mientras que la zorra
soltó a sus hijos bajo unas zarzas sobre la tierra al pie del mismo árbol.
Un día que la zorra salió a buscar su comida, el águila, que estaba
hambrienta cayó sobre las zarzas, se llevó a los zorruelos, y entonces ella
y sus crías se regozijaron con un banquete.
<a href="#" id="mas">... [leer más]</a>
</p>
<p id="desplegar">
Regresó la zorra y más le dolió el no poder vengarse, que saber de la muerte de sus
pequeños; ¿Cómo podría ella, siendo un animal terrestre, sin poder volar, perseguir
a uno que vuela ? Tuvo que conformarse con el usual consuelo de los débiles e
impotentes: maldecir desde lejos a su enemigo.
<br />
Mas no pasó mucho tiempo para que el águila recibiera el pago de su traición
contra la amistad. Se encontraban en el campo unos pastores sacrificando una cabra; cayó
el águila sobre ella y se llevó una víscera que aún conservaba fuego, colocándola
en su nido. Vino un fuerte viento y transmitió el fuego a las pajas, ardiendo
también sus pequeños aguiluchos, que por pequeños aún no sabían volar, los cuales
se vinieron al suelo. Corrió entonces la zorra, y tranquilamente devoró a todos los
aguiluchos ante los ojos de su enemiga.
<br />
<b>“Nunca traiciones la amistad sincera, pues si lo hicieras, tarde o temprano
del cielo llegará el castigo”.</b>
<a href="#" id="menos">... [leer menos]</a>
</p>
</div>
</div>
</body>
Hasta ahorita si corremos nuestro ejemplo se vería así:
Ahora sigue lo divertido XD
al segundo párrafo <p> que le pusimos id="desplegar" le vamos a agregar style="display:none;"
Y a las etiquetas <a> le vamos a agrear la acción onclick que va a llamar a una función la cual llamaremos vermas(' ') y le vamos a pasar como parámetro el id de la etiqueta, por lo que quedaría la etiqueta <a href="#" id="mas" onclick="vermas('mas')" > y quedaría igual la segunda solo le pasaríamos como parámetro 'menos'
Para la función js que será la encargada de esconder y mostrar haremos el siguiente script que lo tenemos que poner dentro de la etiqueta head de html.
El código final se vería de la siguiente manera
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="es" />
<title>Ejemplo de expansión de contenido en html</title>
<script>
function vermas(id){
if(id=="mas"){
document.getElementById("desplegar").style.display="block";
document.getElementById("mas").style.display="none";
}
else{
document.getElementById("desplegar").style.display="none";
document.getElementById("mas").style.display="inline";
}
}
</script>
</head>
<body>
<div>
<div class="parrafo">
<h2>El águila y la zorra </h2>
<p>
Un águila y una zorra que eran muy amigas decidieron vivir juntas
con la idea de que eso reforzaría su amistad. Entonces el águila escogió
un árbol muy elevado para poner allí sus huevos, mientras que la zorra soltó
a sus hijos bajo unas zarzas sobre la tierra al pie del mismo árbol.
Un día que la zorra salió a buscar su comida, el águila, que estaba
hambrienta cayó sobre las zarzas, se llevó a los zorruelos, y entonces ella
y sus crías se regozijaron con un banquete.
<a href="#" onclick="vermas('mas');" id="mas">... [leer más]</a>
</p>
<p id="desplegar" style="display:none;">
Regresó la zorra y más le dolió el no poder vengarse, que saber de la
muerte de sus pequeños; ¿Cómo podría ella, siendo un animal terrestre,
sin poder volar, perseguir a uno que vuela? Tuvo que conformarse con
el usual consuelo de los débiles e impotentes: maldecir desde lejos
a su enemigo.
<br />
Mas no pasó mucho tiempo para que el águila recibiera el pago de su
traición contra la amistad. Se encontraban en el campo unos pastores
sacrificando una cabra; cayó el águila sobre ella y se llevó
una víscera que aún conservaba fuego, colocándola en su nido.
Vino un fuerte viento y transmitió el fuego a las pajas, ardiendo
también sus pequeños aguiluchos, que por pequeños aún no sabían volar,
los cuales se vinieron al suelo. Corrió entonces la zorra, y tranquilamente
devoró a todos los aguiluchos ante los ojos de su enemiga. <br />
<b>“Nunca traiciones la amistad sincera, pues si lo hicieras, tarde
o temprano del cielo llegará el castigo”.</b>
<a href="#" onclick="vermas('menos');" id="menos">... [leer menos]</a>
</p>
</div>
</div>
</body>
</html>
Revisemos un poco el código js, lo que hace la función es tomar el parámetro desde donde le están dando click mas/menos si es más, lo que hace es buscar el <p> desplegar y le cambia el atributo display de none a block y cambia el atributo de la etiqueta <a> (leer más) a none para que se esconda cuando ya esta desplegado el contenido. Por el contrario si el click viene del menos lo que hace es volver a cambiar el tributo por none al párrafo "desplegar" y vuelve a hacer visible la etiqueta <a> leer más.
Como les dije es muy simple si corren su ejercicio ya debe de estar funcionando. Lo demás es pura vanidad (jajaja) un poco de css para dar color, margenes y forma, le agregue la class="content" al primer div y la class="parrafo" al segundo.
Al body le voy a dar color de fondo azul claro (aliceblue);
A la clase content le vamos a dar un ancho de 940px, un margen automático para que se posicione al centro y un padding de 10px para que el contenido no este pegado a los bordes.
En la clase parrafo solo esta justificando el texto, le puse un borde de un 1px de grosor en color azul y el fondo va a ser de color blanco .
También le agregue estilo a las etiquetas <a> que van dentro del párrafo para que no tengan el típico subrayado, eso se quita con el text-decoration:none; y le cambie el color de texto a morado.
El código css solo hay que pegarlo dentro del head y listo el código es el siguiente:
<style>
body{
background-color: aliceblue;
}
.content{
width: 940px;
padding: 10px;
margin: auto;
}
.parrafo{
text-align: justify;
border: solid 1px;
border-color: deepskyblue;
background-color: white;
padding: 10px;
}
body div p a{
text-decoration: none;
color: blueviolet;
}
</style>
Listo si lo corren ya se va a ver como la imagen
Al oprimir sobre leer más se verá de la siguiente manera.
Esto es todo, como ven fue muy sencillo, espero que este ejemplo les sirva para sus proyectos. Como les comenté al inicio existen varias formas de hacerlo pero esta es de la más sencillas.
Recuerden comentar sus dudas, uds. como lo mejorarían o que le podemos agregar. También me pueden comentar que ejemplos podemos subir.
Muy buena publicacion tengo 73 años y apenas estoy aprendiendo estas cosas tan agradables y utiles. Entendi todo el tutorial. Pero me gustaria un ejemplo con divs, articles y como dejar solo una parte de la pagina visible y ocultar el resto. atte Adonai adonvalmo@gmail.com
ResponderEliminarAs stated by Stanford Medical, It is really the SINGLE reason this country's women live 10 years more and weigh on average 19 KG less than we do.
ResponderEliminar(And realistically, it is not about genetics or some secret diet and really, EVERYTHING about "HOW" they are eating.)
BTW, I said "HOW", not "WHAT"...
Click on this link to reveal if this easy quiz can help you discover your real weight loss possibility
Muy bueno el tutorial... muchas gracias. Funciona como dices, nada mas un detalle que cada vez que presionó leer más o leer menos no es suave salta bruscamente al inicio de la página. Como seria para que se despliegue con suavidad el contenido oculto? Gracias.
ResponderEliminarhola que tal lo eh puesto y si funciona pero lo que es el problema que lo pongo en varias secciones de una pagina y no me da solo a una sección ME PUEDEN AYUDAR PORFAVORhttps://easy-codigo.blogspot.com/logout?d=https://www.blogger.com/logout-redirect.g?blogID%3D4684717420383552330%26postID%3D4071573869651999246
ResponderEliminarhttps://gacetafrontal.com/que-fue-el-renacimiento/
ResponderEliminarEste movimiento tuvo lugar en Italia y pasó por muchas de sus ciudades para luego pasar a ser algo que conociera el resto del mundo.
Me sirvió mucho, pero el problema es que cuando doy clic en 'Leer más' o 'Leer menos', me refresca la página al inicio, y tengo que volver al final de la página, cómo arreglo eso?
ResponderEliminarHola que tal, muchas gracias por tu tutorial, me ha servidor, aunque le tuve que realizar algunas modificaciones.
ResponderEliminar