Botón leer mas

Alvaro20 · 14 Jun 2015, 20:33 · Solicitar retirada

Hola a todos, he estado buscando tutoriales por internet sin éxito sobre como hacer el botón leer más y leer menos sobre una cantidad de texto que tengamos en un div. Alguien me puede ayudar con esto por favor? os dejo un ejemplo sobre el que trabajar, gracias

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Leer mas y leer menos</title>
</head>
<body>


<div id="comentario">


<p>Aquí vas a encontrar todos los pasos para aprender a hacer una pagina web gratis sin necesidad de tener ningún tipo de conocimiento en creación, programación, diseño, ni en nada de nada. Verás cómo hacer una página web paso a paso y aprenderás a crear un sitio y a mejorarlo.
Si es tu primera vez en esta página web, lo que tienes que hacer es visitar el apartado Consejos de Diseño donde encontrarás algunos consejos de diseño y creación muy útiles. Después puedes comenzar a hacer el Curso Completo Paso a Paso e incluso aprender Html, CSS, Php, MySql y mucho más.
Además ahora ComoCrearTuWeb te cede hostings gratuitos para que puedas seguir las lecciones sin problemas, sin publicidad.
En menos tiempo del que imaginas, podrás aprender a hacer páginas web mejores que ésta, pues seguro que tienes más imaginación y buen gusto que yo . También dispones de tutoriales para aprender a aumentar visitas en un sitio web, obtener algunos beneficios, aprovechar las redes sociales para hacer aumentar el tráfico de visitas más aún y.. mucho más.
Anímate a participar en el Foro de consultas sobre como crear una pagina web, contándonos tus dudas de diseño, promoción, servidores, etc, o colaborando resolviendo las consultas del resto de compañeros.
No olvides contarme las mejoras que se te ocurran para esta página web y Please!! Comparte las partes que te gusten con tus amigos en tus redes sociales preferidas. Eso nos hace crecer, ser felices y continuar trabajado para tí! Gracias, Es el único precio a pagar por todo este trabajo, el resto.....es gratis. Crea tu página web ya!</p>



</div>






</body>
</html>

Doodleo · 15 Jun 2015, 00:05 · Solicitar retirada

Hola!

Qué has hecho hasta ahora? Postea un ejemplo de algún código que hayas utilizado, y a ver por qué no funciona :D
Lo más sencillo sería hacerlo con jQuery (he visto varios ejemplos por Google, uno llamado expander.js que funcionaba bastante bien)

Alvaro20 · 15 Jun 2015, 01:56 · Solicitar retirada

Hola! he hecho un ejemplo de un tutorial que ví en Youtube pero la parte del código JavaScript esta mal puesta, el botón leer mas esta bien hecho solo queda corregir la parte de JavaScript y también añadir el botón ocultar una vez que se muestra el ejemplo. Este es el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Leer mas y leer menos</title>

<script language="JavaScript" type="text/javascript">
function MostrarTodo(texto){
var elemento = document.getElementById('texto_original');
elemento.innerHTML = texto;
}
</script>

</head>
<body>



[PHP]

<?php
 $texto = "Aquí vas a encontrar todos los pasos para aprender a hacer una pagina web gratis sin necesidad de tener ningún tipo de conocimiento en creación, programación, diseño, ni en nada de nada. Verás cómo hacer una página web paso a paso y aprenderás a crear un sitio y a mejorarlo.
Si es tu primera vez en esta página web, lo que tienes que hacer es visitar el apartado Consejos de Diseño donde encontrarás algunos consejos de diseño y creación muy útiles. Después puedes comenzar a hacer el Curso Completo Paso a Paso e incluso aprender Html, CSS, Php, MySql y mucho más.
Además ahora ComoCrearTuWeb te cede hostings gratuitos para que puedas seguir las lecciones sin problemas, sin publicidad.";

 if (strlen($texto)>100) {
 $texto = substr ($texto,0,100).'...<a href="javascript:void(0);" onclick="MostrarTodo('."'".$texto."'".');">Ver mas</a>';
 print '<div id="texto_original">'.$texto.'</div>';
 }
?>
 
[PHP]







</body>

</html>

Alvaro20 · 15 Jun 2015, 18:57 · Solicitar retirada

Doodleo he buscado en google tal y como me has dicho y he encontrado justo lo que buscaba ¡¡muchas gracias!! para todos aquellos que busquen lo mismo y entren en este tema os dejo el link de descarga. Solo tenéis que sustituir el texto del ejemplo por el que queráis y la cantidad de caracteres que queréis que se muestren antes del botón expandir.

Link de descarga:

https://app.box.com/s/spjgrd0246924t7ngk7o

Doodleo · 16 Jun 2015, 02:48 · Solicitar retirada

Me alegro de que te haya servido :)

Tuve que implantar una vez en un sitio web de forma urgente lo que tú mismo buscabas, y leí por varios sitios que funcionaba bien así que lo probé y efectivamente!